10 полезных фич

Angular, которые вы,

вероятно, не использовали

1. Title

import { Title } from "@angular/platform-browser"
@Component({
    ...
})
export class LoginComponent implements OnInit {
    constructor (private title: Title) 
    {...}
    ngOnInit() {
        this.title.setTitle("Login");
    }
}

2. Meta

import { Meta } from "@angular/platform-browser"
@Component({
    ...
})
export class BlogComponent implements OnInit {
    constructor(private meta: Meta)  
    {...}
    ngOnInit() {
        this.meta.updateTag({name: "title", content: ""})
        this.meta.updateTag({name: "description", content: "Lorem ipsum dolor"})
        this.meta.updateTag({name: "image", content: "./assets/blog-image.jpg"})
        this.meta.updateTag({name: "site", content: "My Site"})
    }
}

3. Изменяем оператор интерполяции

@Component({
    interpolation: ["((","))"]
})
export class AppComponent {}

@Component({
    template: `
        <div>
            ((data))
        </div>
    `,
    interpolation: ["((","))"]
})
export class AppComponent {
    data: any = "dataVar"
}

4. Location

import { Location } from "@angular/common"
@Component({
    ...
})
export class AppComponent {
    constructor(private location: Location) 
    {...}
    navigateTo(url) {
        this.location.go(url)
    }
    goBack() {
        this.location.back()
    }
    goForward() {
        this.location.forward()
    }
}

5. DOCUMENT

6. Декоратор @Attribute

@Component({
    ...
})
export class BlogComponent {
    constructor(@Attribute("type") private type: string ) 
    {...}
}

7. HttpInterceptor

@Injectable()
export class MockBackendInterceptor implements HttpInterceptor {
    constructor() {}
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        ...
    }
}

@NgModule({
    ...
    providers: [
        {
            provide: HTTP_INTERCEPTORS,
            useClass: MockBackendInterceptor,
            multi: true
        }
    ]
    ...
})
export class AppModule {}

8. AppInitializer

function runSettingsOnInit() {
    ...
}

@NgModule({
    providers: [
        { provide: APP_INITIALIZER, useFactory: runSettingsOnInit }
    ]
})

9. Bootstrap Listener

@NgModule({
    {
        provide: APP_BOOTSTRAP_LISTENER, multi: true, 
        useExisting: runOnBootstrap
    }
    ...
})
export class AppModule {}

10. NgPlural

<p [ngPlural]="components">
    <ng-template ngPluralCase="=1">1 component removed</ng-template>    
    <ng-template ngPluralCase=">1">{{components}} components removed </ng-template>    
</p>

Вместо вывода