How it works: Angular Tests

Angular tests are always in the same place as the code. When you create a component, service, pipe, directive with ng generate it will always also generate a .spec.ts file.

Every file with the extension .spec.ts is a test file that is caught by the testing tool. Each thing is tested in a different way. For a really long documentation on tests check the official documentation here.

Continue reading


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) { = 'yellow';

Continue reading

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';

  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';

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

Continue reading