Under the hood Angular compiles structural directives into ng-template elements, e.g.:

<!-- This -->
<div *ngFor="let item of [1,2,3]">

<!-- Get expanded into this -->
<ng-template ngFor [ngForOf]="[1,2,3]" let-item="$implicit"></ng-template>

The value passed to *ngFor directive is written using microsyntax. You can learn about it in the docs.

Also check out an interactive tool that shows the expansion by Alexey Zuev



It is possible to use SVG tags in your Angular component, to create beautiful graphs and visualizations. There are 3 things you need to know:

  1. When binding an SVG attribute, use attr

    <circle [attr.cx]="x" [attr.cy]="y"></circle>
  2. When creating sub-components, use attribute and not tag selector:

    // Not: <child-component></child-component>
    <g child-component></g>
    @Component({selector: '[child-component]' })
  3. When using SVG tags in sub-components use svg prefix:

    selector: '[child-component]',
    template: `<svg:circle></svg:circle>`

继续阅读 30秒学会 Angular 片段 – SVG

You can create own helper component and use it instead of *ngIf.

  selector: 'loader',
  template: `
    <ng-content *ngIf="!loading else showLoader"></ng-content>
    <ng-template #showLoader>🕚 Wait 10 seconds!</ng-template>
class LoaderComponent {
  @Input() loading: boolean;

For usage example:

<loader [loading]="isLoading">🦊 🦄 🐉</loader>

Note that the content will be eagerly evaluated, e.g. in the snippet below destroy-the-world will be created before the loading even starts:

<loader [loading]="isLoading"><destroy-the-world></destroy-the-world></loader>

继续阅读 30秒学会 Angular 片段 – Loader Component

It’s possible to use @ViewChild (also @ViewChildren and @ContentChild/Children) to query for components of different types using dependency injection.

In the example below we can use @ViewChildren(Base) to get instances of Foo and Bar.

abstract class Base {}

  selector: 'foo',
  providers: [{ provide: Base, useExisting: Foo }]
class Foo extends Base {}

  selector: 'bar',
  providers: [{ provide: Base, useExisting: Bar }]
class Bar extends Base {}

// Now we can require both types of components using Base.
@Component({ template: `<foo></foo><bar></bar>` })
class AppComponent {
  @ViewChildren(Base) components: QueryList<Base>;

继续阅读 30秒学会 Angular 片段 – Getting components of different types with ViewChild

Similar to how you can two-way bind [(ngModel)] you can two-way bind custom property on a component, for example [(value)]. To do it use appropriate Input/Output naming:

  selector: 'super-input', 
  template: `...`,
export class AppComponent {
  @Input() value: string;
  @Output() valueChange = new EventEmitter<string>();

Then you can use it as:

<super-input [(value)]="value"></super-input>

继续阅读 30秒学会 Angular 片段 – Two-way binding any property

Sometimes we need to work with every single Control is a form. Here’s how it can be done:

function flattenControls(form: AbstractControl): AbstractControl[] {
  let extracted: AbstractControl[] = [ form ];
  if (form instanceof FormArray || form instanceof FormGroup) {
    const children = Object.values(form.controls).map(flattenControls);
    extracted = extracted.concat(...children);
  return extracted;

For examples use:

// returns all dirty abstract controls
flattenControls(form).filter((control) => control.dirty);

// mark all controls as touched
flattenControls(form).forEach((control) => 
    control.markAsTouched({ onlySelf: true }));

继续阅读 30秒学会 Angular 片段 – Accessing all nested form controls

It is possible to execute asynchronous task before the app start by providing a function returning promise using APP_INITIALIZER token.

  providers: [
      provide: APP_INITIALIZER,
      useValue:  functionReturningPromise
      multi: true
export class AppModule {}

继续阅读 30秒学会 Angular 片段 – Using APP_INITIALIZER to delay app start

The Safe Navigation Operator helps with preventing null-reference exceptions in component template expressions. It returns object property value if it exists or null otherwise.

<p> I will work even if student is null or undefined: {{student?.name}} </p>

继续阅读 30秒学会 Angular 片段 – Safe Navigation Operator