angular

Call child component method from parent class – Angular

by

You can do this by using @ViewChild for more info check this link With type selector child component @Component({ selector: ‘child-cmp’, template: ‘<p>child</p>’ }) class ChildCmp { doSomething() {} } parent component @Component({ selector: ‘some-cmp’, template: ‘<child-cmp></child-cmp>’, directives: [ChildCmp] }) class SomeCmp { @ViewChild(ChildCmp) child:ChildCmp; ngAfterViewInit() { // child is set this.child.doSomething(); } } With … Read more

Angular2 @Input to a property with get/set

by

You could set the @Input on the setter directly, as described below: _allowDay: boolean; get allowDay(): boolean { return this._allowDay; } @Input() set allowDay(value: boolean) { this._allowDay = value; this.updatePeriodTypes(); } See this Plunkr: https://plnkr.co/edit/6miSutgTe9sfEMCb8N4p?p=preview.

How to add “class” to host element?

by

This way you don’t need to add the CSS outside of the component: @Component({ selector: ‘body’, template: ‘app-element’, // prefer decorators (see below) // host: {‘[class.someClass]’:’someField’} }) export class App implements OnInit { constructor(private cdRef:ChangeDetectorRef) {} someField: boolean = false; // alternatively also the host parameter in the @Component()` decorator can be used @HostBinding(‘class.someClass’) someField: … Read more

What’s the difference between markForCheck() and detectChanges()

by

detectChanges() : void Checks the change detector and its children. It means, if there is a case where any thing inside your model (your class) has changed but it hasn’t reflected the view, you might need to notify Angular to detect those changes (detect local changes) and update the view. Possible scenarios might be : … Read more

Can’t bind to ‘routerLink’ since it isn’t a known property

by

You need to add RouterModule to imports of every @NgModule() where components use any component or directive from (in this case routerLink and <router-outlet>. import {RouterModule} from ‘@angular/router’; @NgModule({ declarations:[YourComponents], imports:[RouterModule] declarations: [] is to make components, directives, pipes, known inside the current module. exports: [] is to make components, directives, pipes, available to importing … Read more

What’s the difference between an Angular component and module

by

Components control views (html). They also communicate with other components and services to bring functionality to your app. Modules consist of one or more components. They do not control any html. Your modules declare which components can be used by components belonging to other modules, which classes will be injected by the dependency injector and … Read more

Angular 2 – NgFor using numbers instead collections

by

Within your component, you can define an array of number (ES6) as described below: export class SampleComponent { constructor() { this.numbers = Array(5).fill().map((x,i)=>i); // [0,1,2,3,4] this.numbers = Array(5).fill(4); // [4,4,4,4,4] } } See this link for the array creation: Tersest way to create an array of integers from 1..20 in JavaScript. You can then iterate … Read more

Property ‘map’ does not exist on type ‘Observable’

by

You need to import the map operator: import ‘rxjs/add/operator/map’ Or more generally: import ‘rxjs/Rx’; Notice: For versions of RxJS 6.x.x and above, you will have to use pipeable operators as shown in the code snippet below: import { map } from ‘rxjs/operators’; import { HttpClient } from ‘@angular/common/http’; // … export class MyComponent { constructor(private … Read more