Summary

Advanced Angular

Learn about more advanced Angular concept.

This material is part of the mobile development course for Media Engineering.

You will need

• Google Chrome (recommended, any browser with developer tools will do)

Recommended reading

• Angular

Custom attribute directives

Advanced Angular

An attribute directive changes the appearance or behavior of a DOM element.

Angular CLI: Use ng generate directive <DirectiveName> to create all the files for a new directive

Create a src/app/highlight.directive.ts file with the following contents:

import { Directive } from '@angular/core';
@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor() {
    console.log('the highlight directive was used');
  }
}

Similarly to a component, a directive is a JavaScript class, this time annotated with the @Directive decorator.

The selector, [appHighlight] is an attribute selector. It's a good practice to prefix the selector ("app" for this example) to avoid naming collisions.

Using an attribute directive

Advanced Angular > Custom attribute directives

To use your new attribute directive, you must declare it in your module's declarations array in src/app/app.module.ts:

import { HighlightDirective } from './highlight.directive';
// Other imports...
@NgModule({
  declarations: [
    AppComponent,
    HighlightDirective
  ],
  // ...
})
export class AppModule { }

Now all you need to do is add the attribute to an element in src/app/app.component.html. Let's add it to the greeting.

<h1 [title]='titleComment' (click)='onTitleClicked($event)' appHighlight>
  Welcome to {{ title }}!
</h1>

You should see the directive being used in the console after entering some text in the input field.

Modifying the DOM

Advanced Angular > Custom attribute directives

Now add an ElementRef argument to the directive's constructor in src/app/highlight.directive.ts:

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

Doing this injects a reference to the host DOM element, the element to which you applied the appHighlight attribute.

ElementRef grants direct access to the host DOM element through its nativeElement property. In this example we set the background color to yellow.

Custom pipes

Advanced Angular

Let's implement an (amazing) pipe that adds an exclamation point to the end of a string:

Angular CLI: Use ng generate pipe <PipeName> to create all the files for a new pipe

Create a src/app/pipes/exclamation.pipe.ts file with the following contents:

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'exclamation'
})
export class ExclamationPipe implements PipeTransform {
  transform(value: any, args?: any): any {
    return `${value}!`;
  }
}

Using a pipe

Advanced Angular > Custom pipes

To use your new pipe, you must declare it in your module's declarations array in src/app/app.module.ts:

// Other imports...
import { ExclamationPipe } from './pipes/exclamation.pipe';
@NgModule({
  declarations: [
    AppComponent,
    HighlightDirective,
    ExclamationPipe
  ],
  // ...
})
export class AppModule { }

Using the pipe is as simple as "piping" an interpolated value into it with the pipe (|) character in a template. You can do that in src/app/app.component.html, then type some text in the input field to see it:

<p>
  {{ hello(greeting) | exclamation }}
</p>

Pipe parameters

Advanced Angular > Custom pipes

Pipe can also take parameters. Let's add a number parameter to allow customizing the number of exclamation points in src/app/pipes/exclamation.pipe.ts:

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'exclamation'
})
export class ExclamationPipe implements PipeTransform {
  transform(value: any, strength: number = 1): any {
    const exclamation = '!'.repeat(strength);
    return `${value}${exclamation}`;
  }
}

Parameters are passed to pipes by appending :value to them in the template in src/app/app.component.html:

<p>
  {{ hello(greeting) | exclamation:3 }}
</p>

Resources

Advanced Angular

Documentation

• Angular Tour of Heroes Tutorial
• Angular Developer Guide
• Angular API reference