---
tags: angular
---
# Angular notes

https://rangle.io/blog/10-ways-to-misuse-angular/

two-way bindings

<component
  [ngModel]="searchTerm$ | async" 
  (ngModelChange)="searchTerm$.next($event)">
</component>

async pipe variable

<ng-template #state let-state="state">
    <mat-slide-toggle 
        #dpiToggle 
        class='mat-slide-toggle--disabled' 
        [disabled]="state?.isEnabled"
        (toggleChange)="enable()">
    </mat-slide-toggle>
</ng-template>
<ng-container 
    *ngTemplateOutlet="state; context: { state: state$ | async}">
</ng-container>
    
   

### ngTemplateOutlet

<ng-template #chunk1 let-data>
    <div>
        {{ data.prop1 }}
    </div>
</ng-template>
<p>playground works!</p>

<! -- declare template and context respectively -->
<ng-container [ngTemplateOutlet]="chunk1" [ngTemplateOutletContext]="
    { 
        $implicit: { prop1: 'prop1'}
    }
    ">
</ng-container>

<! -- compact way -->
<ng-container *ngTemplateOutlet="chunk1;
    context: {
        $implicit: { 
            prop1: 'prop1-condensed'
        }
    }
"></ng-container>

[Reusing Functionality with NgTemplateOutlet](https://tlmader.medium.com/reusing-functionality-with-ngtemplateoutlet-3e29171fbd6e)

### async pipe in ngTemplateOutlet

<ng-template #loading>
    start after 5 seconds
</ng-template>

<ng-template #asyncTemplate let-second="second">
    <div *ngIf="second; else loading">
        {{ second }}
    </div>
</ng-template>

<ng-container
    *ngTemplateOutlet="asyncTemplate;context:{second: tick$ | async}">
</ng-container>

### ngProjectAs

<my-pasture>
    <ng-container ngProjectAs="my-pets">
        <my-sheep></my-sheep>
    </ng-container>
    <my-dog ngProjectAs="my-pets"></my-dog>
</my-pasture>

### What ``<ng-content>`` does
`<ng-content>` does not produce content, it simply moves existing one.

Why?
- consistent expectations
- performance

### Blueprints, a.k.a TemplateRefs

syntax sugar
wrapping element into ng-template

<my-sheep *my-sheep-temp></my-sheep>

<ng-template my-sheep-temp>
  <my-sheep></my-sheep>
</ng-template>

### Portals

<ng-template #portal>
    <ng-content></ng-content>
</ng-template>

watch [video](https://www.youtube.com/watch?v=PTwKhxLZ3jI&amp%3Blist=LL&amp%3Bindex=1&ab_channel=ng-conf)

### ng-template selfie

<ng-template let-a="aVariable" [ngTemplateOutletContext]="{ aVariable: 123 }" [ngTemplateOutlet]="selfie" #selfie>
  <div>
    <span>{{a}}</span>
  </div>
</ng-template>