If you want to be able to add this to any elements without having to copy/paste the same code over and over again, you can make a directive to do this. It is as simple as below: import {Directive, HostListener} from “@angular/core”; @Directive({ selector: “[click-stop-propagation]” }) export class ClickStopPropagation { @HostListener(“click”, [“$event”]) public onClick(event: any): … Read more
EDIT: as of 2021, the proper way is to use the shareReplay operator natively proposed by RxJs. See more details in below answers. Cache the data and if available cached, return this otherwise make the HTTP request. import {Injectable} from ‘@angular/core’; import {Http, Headers} from ‘@angular/http’; import {Observable} from ‘rxjs/Observable’; import ‘rxjs/add/observable/of’; //proper way to … Read more
The ng g component plainsight/some-name makes a new directory when we use it. The final output will be: plainsight/some-name/some-name.component.ts To avoid that, make use of the flat option ng g component plainsight/some-name –flat and it will generate the files without making a new folder plainsight/some-name.component.ts
I think that you need to import this: import ‘rxjs/add/operator/map’ Or more generally this if you want to have more methods for observables. WARNING: This will import all 50+ operators and add them to your application, thus affecting your bundle size and load times. import ‘rxjs/Rx’; See this issue for more details.
I missed let in front of talk: <div *ngFor=”let talk of talks”> Note that as of beta.17 usage of #… to declare local variables inside of structural directives like NgFor is deprecated. Use let instead. <div *ngFor=”#talk of talks”> now becomes <div *ngFor=”let talk of talks”> Original answer: I missed # in front of talk: … Read more
Import the HttpModule import { HttpModule } from ‘@angular/http’; @NgModule({ imports: [ BrowserModule, HttpModule ], providers: [], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export default class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule); Ideally, you split up this code in two separate files. For further information read: https://v2.angular.io/docs/ts/latest/cookbook/rc4-to-rc5.html https://v2.angular.io/docs/ts/latest/guide/ngmodule.html
Use a setter for the ViewChild: private contentPlaceholder: ElementRef; @ViewChild(‘contentPlaceholder’) set content(content: ElementRef) { if(content) { // initially setter gets called with undefined this.contentPlaceholder = content; } } The setter is called with an element reference once *ngIf becomes true. Note, for Angular 8 you have to make sure to set { static: false }, … Read more
Angular CLI version 9 (used to create Angular 9 projects) now picks up style from schematics instead of styleext. Use the command like this: ng config schematics.@schematics/angular:component.style scssand the resulting angular.json shall look like this “schematics”: { “@schematics/angular:component”: { “style”: “scss” } } Other possible solutions & explanations: To create a new project with angular … Read more
Basically, you write a pipe which you can then use in the *ngFor directive. In your component: filterargs = {title: ‘hello’}; items = [{title: ‘hello world’}, {title: ‘hello kitty’}, {title: ‘foo bar’}]; In your template, you can pass string, number or object to your pipe to use to filter on: <li *ngFor=”let item of items … Read more