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, ]
There is nothing wrong with your configuration. Angular (since version 2.0) uses npm modules and dependencies for development. That’s the sole reason you are seeing such a huge number of files. A basic setup of Angular contains transpiler, typings dependencies which are essential for development purposes only. Once you are done with development, all you … Read more
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
The hidden property can be used for that [hidden]=”!myVar” See also https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden issues hidden has some issues though because it can conflict with CSS for the display property. See how some in Plunker example doesn’t get hidden because it has a style :host {display: block;} set. (This might behave differently in other browsers – I … Read more
Actually, there are two ways of detecting and acting upon when an input changes in the child component in angular2+ : You can use the ngOnChanges() lifecycle method as also mentioned in older answers: @Input() categoryId: string; ngOnChanges(changes: SimpleChanges) { this.doSomething(changes.categoryId.currentValue); // You can also use categoryId.previousValue and // categoryId.firstChange for comparing old and new … Read more
I would use this syntax to set the index value into an attribute of the HTML element: Angular >= 2 You have to use let to declare the value rather than #. <ul> <li *ngFor=”let item of items; let i = index” [attr.data-index]=”i”> {{item}} </li> </ul> Angular = 1 <ul> <li *ngFor=”#item of items; #i … Read more
Install @angular-devkit/build-angular as dev dependency. This package is newly introduced in Angular 6.0 npm install –save-dev @angular-devkit/build-angular or, yarn add @angular-devkit/build-angular –dev