How it works: Angular Components

Angular components are elements composed by a template that will render your application.

import { Component } from '@angular/core';

@Component({
  providers: [],
  selector: 'app-required',
  styleUrls: ['required.component.scss'],
  // template: `This field is required.`,
  templateUrl: 'required.component.html',
})
export class RequiredComponent { }

To create a component we add @Component passing some parameters:

  • providers: Resources that will be injected into the component constructor
  • selector: The query selector that will find the element in the HTML and replace by the component
  • styles: Inline styles. NOTE: DO NOT use this parameter with require, it works on development but when you build the application in production all your styles are lost
  • styleUrls: Array of path to style files
  • template: String that contains your HTML
  • templateUrl: Path to a HTML file

There are many other parameters, but those are the main ones. Note that you should use style or styleUrls, not both. Same for template and templateUrl, don’t use both. I would recommend always using styleUrls and templateUrl.

Styles

Styles here are different from your application style file, anything applied in the component will be restricted to this scope. For example, say you add:

div { background: red; }

All divs inside the component will be red, but if you have other components, other divs in your HTML they will not be changed at all.

Template

Templates are HTML files that have a syntax that is parsed by Angular.

Variables

If in your class you have a field, say name, you can display this name in the template by adding

{{ name }}

Nested components

You can have nested component by adding them in the template with the selector markup

<app-login></app-login>

You can pass values to a component

<app-login title="Something"></app-login>

but for that on your LoginComponent you will need do add a field on the class with the @Input() decorator

@Input()
title: String;

Bindings

You can bind things to your component class fields

div [hidden]="shouldHide"

You can bind events to your component class methods ($event is a special variable that carries the event object of the triggered action)

<form (onSubmit)="onSubmit($event)"></form>

You can make a two-way binding, you need to import the FormsModule in your app module. This is cool, but not recommended, it isn’t good for testing, it’s slow…

<input type="text" [(ngModel)]="someName" />

Instead of two-way binding you should use the tools available in ReactiveFormsModule.

Pipes

Pipes are functions that transform values. You can use, for example:

{{ name|lower }}

To display a “name” in lowercase. There are some built-in pipes but you can also create custom ones.

Angular How it works series

Check out other posts of this series, Angular How it works.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s