I’m super late to this party, but NO! DO NOT USE DOCUMENT.QUERYSELECTOR. That is NOT how you style an Angular DOM element! <div [ngStyle]=”{‘top.px’: divStyle}”> Then in your component, you have ngAfterViewInit() { this.divStyle = 200; }
<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>
The best way to do this now is using a module loader like browserify, webpack, or typescript. There are plenty of others as well. Since requires can be made from the relative location of the file, and the added bonus of being able to import templates via transforms or loaders like partialify, you don’t even … Read more
Inside the ngFor you have access to several variables: index: number: The index of the current item in the iterable. first: boolean: True when the item is the first item in the iterable. last: boolean: True when the item is the last item in the iterable. even: boolean: True when the item has an even … Read more
You can access the parent scope by using $parent <div class=”row-fluid” ng-repeat=”message in messages.current|filter:’draft'”> {{ message.subject }} … {{ $parent.campaign.name }} … </div>
Content inside <ng-content> is insulated from the component. It can’t see the component’s attributes or styling. If you do need to style it, and sometimes you will, you have two options: 1. Just write CSS You can create a regular CSS file and style the content like that. You are almost certainly using the shadow … Read more
The code for the ngIf directive expects to be passed a reference to a template (TemplateRef) for the else branch, which it will call createEmbeddedView on to display the nested content. Therefore, it makes no sense to try to use any other kind of element for the else content – it just won’t work. You’re … Read more
You can use ViewChild <child-tag #varName></child-tag> @ViewChild(‘varName’) someElement; ngAfterViewInit() { someElement… } where varName is a template variable added to the element. Alternatively, you can query by component or directive type. There are alternatives like ViewChildren, ContentChild, ContentChildren. @ViewChildren can also be used in the constructor. constructor(@ViewChildren(‘var1,var2,var3’) childQuery:QueryList) The advantage is that the result is … Read more
You can use exportAs property of the @Directive annotation. It exports the directive to be used in the parent view. From the parent view, you can bind it to a view variable and access it from the parent class using @ViewChild(). Example With a plunker: @Directive({ selector:'[my-custom-directive]’, exportAs:’customdirective’ //the name of the variable to access … Read more
It’s a class name that is used internally by the BrowserAnimationsModule when animating entry and leaving transitions. You can see it in the source code here.