Handle @Input and @Output for dynamically created Component in Angular 2

You can easily bind it when you create the component: createSub() { const factory = this.resolver.resolveComponentFactory(SubComponent); const ref = this.location.createComponent(factory, this.location.length, this.location.parentInjector, []); ref.someData = { data: ‘123’ }; // send data to input ref.onClick.subscribe( // subscribe to event emitter (event: any) => { console.log(‘click’); } ) ref.changeDetectorRef.detectChanges(); return ref; } Sending data is really … Read more

Custom attribute gives parsing error when using with an angular 2.0.0-beta.0

Angular by default uses property binding but a doesn’t have a property data-loc. To tell Angular explicitly to use attribute binding, use instead: try this one may work for you. <a href=”https://stackoverflow.com/questions/35519810/javascript:void(0)” title=”{{inst.title}}” [attr.data-loc]=”inst.actionval”> or <a href=”https://stackoverflow.com/questions/35519810/javascript:void(0)” title=”{{inst.title}}” attr.data-loc=”{{inst.actionval}}”>

why *ngIf doesnt’work with ng-template?

Read the doc here https://angular.io/guide/structural-directives especially for <div *ngIf=”hero” >{{hero.name}}</div> The asterisk is “syntactic sugar” for something a bit more complicated. Internally, Angular desugars it in two stages. First, it translates the *ngIf=”…” into a template attribute, template=”ngIf …”, like this. <div template=”ngIf hero”>{{hero.name}}</div> Then it translates the template attribute into a element, wrapped around … Read more

Why angular 2 ngOnChanges not responding to input array push

Angular change detection only checks object identity, not object content. Inserts or removals are therefore not detected. What you can do is to copy the array after each update insertIds(id:any) { this.metaIds.push(id); this.metaIds = this.metaIds.slice(); } or use IterableDiffer to check for changes inside InputComponent in ngDoCheck like NgFor does.

Angular2 – Interpolate string with html

You can simply use [innerHTML] directive to accomplish it. http://plnkr.co/edit/6x04QSKhqbDwPvdsLSL9?p=preview import {Component, Pipe} from ‘@angular/core’ @Component({ selector: ‘my-app’, template: ` Hello my name is <span [innerHTML]=”myName”></span> `, }) export class AppComponent { myName=”<strong>Pardeep</strong>”; } Update: I checked it doesn’t work this way after RC.1 release. Let’s say to make it work with RC.4 you can … Read more

Generate dynamic css based on variables angular

You can use ngStyle to dynamically add the css to your page from json. <div [ngStyle]=”{‘color’: variable ? ‘red’ : ‘blue’}”></div> An another example: <div md-card-avatar [ngStyle]=”{‘background-image’: ‘url(‘ + post.avatar + ‘)’, ‘background-size’: ‘cover’ }”></div> here I have loaded background image from json-data.

Angular 2+ one-time binding

I found solution for one time binding in angular 2 here: https://github.com/angular/angular/issues/14033 I created this directive: import { Directive, TemplateRef, ViewContainerRef, NgZone } from “@angular/core”; @Directive({ selector: ‘[oneTime]’, }) export class OneTimeDirective { constructor(template: TemplateRef<any>, container: ViewContainerRef, zone: NgZone) { zone.runOutsideAngular(() => { const view = container.createEmbeddedView(template); setTimeout(() => view.detach()); }) } } And used … Read more

How do I combine a template reference variable with ngIf?

As Tobias Bosch said A variable declared inside of an *ngIf cannot be used outside of the *ngIf https://github.com/angular/angular/issues/6179#issuecomment-233374700 Only the opposite way (i.e. declare a variable inside of *ngIf and use it outside of *ngIf) is not working, and won’t work by design. https://github.com/angular/angular/issues/6179#issuecomment-233579605 Why is it so? 1) Without *ngIf Let’s see at … Read more

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)