Dornhoth

<mat-icon class="info-icon" (click)="toggleInfoByClick()" color="primary">info</mat-icon>

Dornhoth

<div class="label" #label>Some Label
  <app-info-button [appInfoPopup]="info" [label]="label"></app-info-button>
</div>
<ng-template #info>
  <app-info>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor,
    dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa,
    varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non
    fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim.
    Pellentesque congue.</app-info>
</ng-template>

Dornhoth

@Directive({
  selector: '[myValidator]',
  providers: [{
    provide: NG_VALIDATORS,
    useExisting: MyValidatorDirective,
    multi: true,
  }]
})
class MyValidatorDirective implements Validator {
  validate(control: AbstractControl): ValidationErrors | null {

Dornhoth

import { Component, InjectionToken, Inject } from '@angular/core';

export const TOKEN = new InjectionToken<string>('MyToken');

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  providers: [
    { provide: TOKEN, useValue: 'my injected object', multi: true },

Dornhoth

import { Component, InjectionToken, Inject } from '@angular/core';

export const TOKEN = new InjectionToken<string>('MyToken');

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  providers: [
    { provide: TOKEN, useValue: 'my injected object 1', multi: true },

Dornhoth

import { Component, InjectionToken, Inject } from '@angular/core';

export const TOKEN = new InjectionToken<string>('MyToken');

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  providers: [{ provide: TOKEN, useValue: 'my injected object' }]
})

Dornhoth

<div [ngTemplateOutlet]="defaultTemplate"></div>

<ng-template #defaultTemplate>
  An unexpected error occurred.
</ng-template>

Dornhoth

// not going to work
<div class="lesson" *ngIf="array" *ngFor="let element of array">
  {{ element }}
</div>

// working
<ng-container *ngIf="array">
  <div *ngFor="let element of array">
    {{ element }}
  </div>

Dornhoth

<div *ngIf="text else defaultTemplate">
  {{text}}
</div>

<ng-template #defaultTemplate>
  An unexpected error occurred.
</ng-template>

Dornhoth

<app-error-card></app-error-card>
<app-error-card [template]="googleItTemplate"></app-error-card>

<ng-template #googleItTemplate>
  Another error text
  <div>
    <a href="google.com">Google it</a>
  </div>
</ng-template>