angular-components

Passing HTML into my component

by

Create a sidebar component with an <ng-content> where the passed children should be displayed @Component({ selector: ‘sidebar’, template: ‘<ul><ng-content></ng-content></ul>’ }) export class SidebarComponent { } and use it like <sidebar> <li class=”tooltipped” data-position=”right” data-delay=”50″ data-tooltip=”Go to the dashboard”> <a href=”#”> <i class=”material-icons”>home</i> <span>Home</span> </a> </li> <li class=”tooltipped” data-position=”right” data-delay=”50″ data-tooltip=”Manage your times”> <a href=”#”> <i … Read more

Angular 2+/4/5/6/7: Smart, dumb and deeply nested component communication

by

(UPDATE: 02-07-2019: This post was getting dated–added the ‘store/ngrx’ pattern) So after looking into this further, when it comes to how best to communicate down and up a nested component chain, there seems to be really only two options — a Faustian bargain between: EITHER either pass @Input/@Output bindings up, down, and throughout the nested … Read more

“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

tech