How it works: Angular Directives

Angular directives are custom attributes for elements. It allows you to manipulate the element.

import { Directive, ElementRef } from '@angular/core';

@Directive({ selector: '[appHighlight]' })
export class HighlightDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.backgroundColor = 'yellow';
    }
}

Continue reading

Advertisements

How it works: Angular Pipes

Angular pipes are functions that transform values. There are some built-in pipes and you can create your own pipes.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'required' })
export class RequiredPipe implements PipeTransform {
  transform(value: string, ...args: any[]) {
    return `The field ${value} is required.`;
  }
}

Continue reading

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 { }

Continue reading

How it works: Angular Modules

Angular modules are containers for different parts of your app.

You can have nested modules, your app.module is already actually nesting other modules such as BrowserModule and you can add RouterModule and so on.

A module is a class with the @NgModule decorator

import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

@NgModule({
  bootstrap: [AppComponent]
  declarations: [AppComponent],
  exports: [],
  imports: [BrowserModule],
  providers: [],
})
export class AppModule { }

Continue reading