If you’re using ViewEncapsulation value which is different than default, it might be daunting to set the value manually for every component.

Luckily you can configure it globally when bootstrapping your app:

platformBrowserDynamic().bootstrapModule(AppModule, [
  {
    // NOTE: Use ViewEncapsulation.None only if you know what you're doing.
    defaultEncapsulation: ViewEncapsulation.None
  }
]);

继续阅读 30秒学会 Angular 片段 – Default ViewEncapsulation value

EventEmitters used for @Output‘s are just Observables with an emit method.

This means that you can just use Observable instance instead, e.g. we can wire up FormControl value changes directly:

readonly checkbox = new FormControl();
@Output() readonly change = this.checkbox.valueChanges;

继续阅读 30秒学会 Angular 片段 – Observables as outputs

With ng-content you can pass any elements to a component.
This simplifies creating reusable components.

@Component({
  selector: 'wrapper',
  template: `
    <div class="wrapper">
      <ng-content></ng-content>
    </div>
  `,
})
export class Wrapper {}
<wrapper>
  <h1>Hello World!</h1>
</wrapper>

继续阅读 30秒学会 Angular 片段 – ng-content

Generally we get one service instance per the whole application.
It is also possible to create an instance of service per component or directive.

@Component({
  selector: 'provide',
  template: '<ng-content></ng-content>',
  providers: [ Service ]
})
export class ProvideComponent {}
@Directive({
  selector: '[provide]',
  providers: [ Service ]
})
export class ProvideDirective {}

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