angular2-template

问题 I'm using angular 2 and I'm loading data from a service to my view, specifically to buttons: my View : <div id="menuMaisons" class="collapse" *ngFor="#item of items_list"> <li> <div > <a href="{{item.href}}" class="{{item.class}}" data-toggle={{'item.toggle'}} data-parent={{'item.parent'}} > <span class="titres"> {{item.label}}</span> </a> </div> </li> </div> my service is simply parsin this json data : [ { "//////////////////SUBMENU MAISON////////////////":""}, { "id": 1, "href": "

问题 plnkr demo here @Component({ selector: 'my-demo', template: `This is <ng-content select=".content"></ng-content>` }) export class DemoComponent { name = 'Angular'; } @Component({ selector: 'my-app', template: `<h1>Hello {{name}}</h1> <my-demo><div class="content">In Content</div></my-demo> ` }) export class AppComponent { name = 'Angular'; } I want to conditional ng-content , like <ng-template *ngIf='hasContent(".content"); else noContent'> This is <ng-content select=".content"></ng-content>

问题 I have a model which is an array element. I want to clear the values of each element on ngIf condition.Please find below HTML : <div *ngIf="flag" > <table id="table" class="table table-hover table-bordered table-mc-light-blue"> <thead> <tr> <th>col 1</th> <th>col 2</th> </tr> </thead> <tr *ngFor="let item of collection;"> <td>{{item.col1}}</td> <td> <input type="text" class="form-control" [(ngModel)]="item.col2" #input="ngModel" name="input-{{i}}"> </td> </tr> </table> </div> On flag set to

问题 I have two components its called app.component and child.component. I want to pass the data from parent to child. My code is below. Where am i making mistake? app.component.ts import { ChildComponent } from './child.component'; import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], entryComponents:[ChildComponent] }) export class AppComponent { title = 'app works!'; } child.component.ts import {

问题 I traced the evaluation of an expression in the app.component.html main template and i realized that the trace appeared exactly 5 times each time i refresh or click any page. I then placed a trace in the ngOnInit of app.component.ts and it executes only once as expected... Only the expression in the html file gets called multiple times ! Main routes definitions: const routes: Routes = [ { path: '', redirectTo: '/dashboard', pathMatch: 'full' }, //{ path: '', component: DashboardComponent }, {

问题 I have 4 Components. And I am using KendoGrid for displaying the data in all four components. But now, I dont want to use to setup KendoGrid in all four components. For this, I made a child component in which i am setting up the KendoGrid and passing the data from parent component. My child component is given below: ChildComponent.ts : @Component({ selector:"my-kendo-grid", template:` <kendo-grid [data]="dataVal"> <template ngFor [ngForOf]="myArr" let-column > <kendo-grid-column field="{

问题 My child-component looks like: ... @Component({ selector: '[child-component]' templateUrl: './child.template.html' }) ... and my parent template like: <span child-component [someInput]="123"></span> now I want to render the content of my child component without the <span> container around it. I want no container at all in my parent component's template, just the content of our child-component's template. I tried some other tags already. <ng-content> (nothing rendered at all) <ng-template>

问题 I have a component in angular 2 where i generate a list of checkboxes from an array. Now i need to populate a different array basd on the checkboxes checked and this should be a two way binding, meaning the checkboxes must already be checked if their values are already in the array. I used a plugin called checklist-model in angular 1 to do this. <h4><label><input type="checkbox" value="" (click)=checkAll(screen)>{{screen.screen_name}}</label></h4> </div> <div class="row"> <div class="col-lg-3

问题 I'm still getting used to Angular's change detection implementation, and I'm not clear on whether calling functions in templates causes performance issues. For example, is it worse to do the following: <mat-tab-group> <mat-tab label="First"> {{ getFirstTab() }} </mat-tab> <mat-tab label="Second"> {{ getSecondTab() }} </mat-tab> </mat-tab-group> than do: <mat-tab-group> <mat-tab label="First"> {{ firstTabContent }}</mat-tab> <mat-tab label="Second"> {{ secondTabContent }}</mat-tab> </mat-tab

问题 here is an other "View not changing" problem I have a component that I need to update when I select a name. But, I don't know why, I have to select 2 times the name before the model change. It's like the 1st time I choose the model is not updated. Using angular 2 4.0.0 with materializeCSS (autocomplete coming from materialize) Example So then, I would like to directly have the button appears once I choose. HTML Template of this part : <form> <i class="material-icons prefix">search</i> <input