angular-components

“Edit / Delete” button for each row & header column is ‘Action’ in the md-table component

by

You are on the right track, you just need to add an actions item to displayedColumns list: displayedColumns = [“username”, “email”, “userFirstName” … , “actions”]; and: <ng-container cdkColumnDef=”actions”> <md-header-cell > Actions </md-header-cell> <md-cell *cdkCellDef=”let row” > <button md-raised-button >Edit</button> </md-cell> </ng-container>

How to get element’s width/height within directives and component?

by

You can use ElementRef as shown below, DEMO : https://plnkr.co/edit/XZwXEh9PZEEVJpe0BlYq?p=preview check browser’s console. import { Directive, Input, Output, ElementRef, Renderer } from ‘@angular/core’; @Directive({ selector:”[move]”, host:{ ‘(click)’:”show()” } }) export class GetEleDirective{ constructor(private el:ElementRef) { } show(){ console.log(this.el.nativeElement); console.log(‘height—‘ + this.el.nativeElement.offsetHeight); //<<<===here console.log(‘width—‘ + this.el.nativeElement.offsetWidth); //<<<===here } } Same way you can use it within … Read more

Angular 2 – Passing data to Child component after Parent initialisation

by

Since data is undefined at start, you can postpone it with *ngIf=”data” <div *ngIf=”data”> <test-child [childData]=”data”></test-child> </div> Or you can implement ControlValueAccessor on your component and pass it by ngModel with ngModelChange <test-child [ngModel]=”data?” (ngModelChange)=”data? ? data= $event : null”></test-child>

How to Update a Component without refreshing full page – Angular

by

You can use a BehaviorSubject for communicating between different components throughout the app. You can define a data sharing service containing the BehaviorSubject to which you can subscribe and emit changes. Define a data sharing service import { Injectable } from ‘@angular/core’; import { BehaviorSubject } from ‘rxjs’; @Injectable() export class DataSharingService { public isUserLoggedIn: … Read more

Declare a component with generic type

by

You can also access the Type parameter through the ViewChild like this: export class Bazz { name: string; constructor(name: string) { this.name = name; } } @Component({ selector: ‘app-foo’, template: `<div>{{bazz?.name}}</div>`, exportAs: ‘appFoo’ }) export class FooComponent<T> { constructor() {} private _bazz: T; set bazz(b: T) { this._bazz = b; } get bazz(): T { … Read more

Generating Component without spec.ts file in Angular 2+

by

Updated for Angular >=8 CLI For one component use the following command: ng generate component –skip-tests=true component-name For a single project, change or add the following in your angular.json: { “projects”: { “{PROJECT_NAME}”: { “schematics”: { “@schematics/angular:component”: { “skipTests”: true } } } } } For a global setting for all your projects, change or … Read more

What is entryComponents in angular ngModule?

by

Note: EntryConponent is Deprecated from Angular 9.0.0 See the angular docs form more details. This is for dynamically added components that are added using ViewContainerRef.createComponent(). Adding them to entryComponents tells the offline template compiler to compile them and create factories for them. The components registered in route configurations are added automatically to entryComponents as well … Read more

Multiple ng-content

by

You could add dummy attributes header and body as opposed to template references (#header, #body). And transclude using ng-content with select attribute like select=”[header]”. app.comp.html <app-child> <div header >This should be rendered in header selection of ng-content</div> <div body >This should be rendered in body selection of ng-content</div> </app-child> child.comp.html <div class=”header-css-class”> <ng-content select=”[header]”></ng-content> </div> … Read more