Specify the module using the –module parameter. For example, if the main module is app.module.ts, run this: ng g c new-component –module app Or if you are in an other directory then ng g c component-name –module ../
A @Component requires a view whereas a @Directive does not. Directives I liken a @Directive to an Angular 1.0 directive with the option restrict: ‘A’ (Directives aren’t limited to attribute usage.) Directives add behaviour to an existing DOM element or an existing component instance. One example use case for a directive would be to log … Read more
Actually you can take advantage of the built-in Location service, which owns a “Back” API. Here (in TypeScript): import {Component} from ‘@angular/core’; import {Location} from ‘@angular/common’; @Component({ // component’s declarations here }) class SomeComponent { constructor(private _location: Location) {} backClicked() { this._location.back(); } } Edit: As mentioned by @charith.arumapperuma Location should be imported from @angular/common … Read more
Angular v2 doesn’t support more than one structural directive on the same element. As a workaround use the <ng-container> element that allows you to use separate elements for each structural directive, but it is not stamped to the DOM. <ng-container *ngIf=”show”> <div *ngFor=”let thing of stuff”> {{log(thing)}} <span>{{thing.name}}</span> </div> </ng-container> <ng-template> (<template> before Angular v4) … Read more
In Angular 2 you can subscribe (Rx event) to a Router instance. So you can do things like class MyClass { constructor(private router: Router) { router.subscribe((val) => /*whatever*/) } } Edit (since rc.1) class MyClass { constructor(private router: Router) { router.changes.subscribe((val) => /*whatever*/) } } Edit 2 (since 2.0.0) see also : Router.events doc class … Read more
As in latest release of Angular (v6.1.0) , Angular Team has added new built in pipe for the same named as keyvalue pipe to help you iterate through objects, maps, and arrays, in the common module of angular package. For example – <div *ngFor=”let item of testObject | keyvalue”> Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b> </div> … Read more
To resolve this problem HttpClient is Angular’s mechanism for communicating with a remote server over HTTP. To make HttpClient available everywhere in the app, open the root AppModule, import the HttpClientModule from @angular/common/http, import { HttpClientModule } from ‘@angular/common/http’; add it to the @NgModule.imports array. imports:[HttpClientModule, ]
Just go to tsconfig.json and set “strictPropertyInitialization”: false to get rid of the compilation error. Otherwise you need to initialize all your variables which is a little bit annoying
The new V3 router has a url property. this.router.url === ‘/login’
Instead of injecting ElementRef and using querySelector or similar from there, a declarative way can be used instead to access elements in the view directly: <input #myname> @ViewChild(‘myname’) input; element ngAfterViewInit() { console.log(this.input.nativeElement.value); } StackBlitz example @ViewChild() supports directive or component type as parameter, or the name (string) of a template variable. @ViewChildren() also supports … Read more