You just need to remove the slash from the beginning of the styleUrls path like this: @Component({ selector: ‘dashboard’, templateUrl: ‘/app/components/dashboard/dashboard.html’, styleUrls: [‘app/components/dashboard/dashboard.css’] })
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
<table> <ng-container *ngFor=”let group of groups”> <tr><td><h2>{{group.name}}</h2></td></tr> <tr *ngFor=”let item of group.items”><td>{{item}}</td></tr> </ng-container> </table>
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}}”>
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
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.
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
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.
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
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