ngfor

I have a json array which can contain either the component or the html selector for the component i want to load. I am trying to load this data inside a for loop. When I try to interpolate the value {{d.html}} it appears as plan text. When I use the innerHTML approach below and inspect the dom I see the html there but it does not behave as a custom component (the dom will just contain instead of initializing it and replacing it with the components template. I have look at the dynamic content loader but that does not see to fit. This is in a for loop and therefore can not use the template

In Angular 1.x this following code works as I want to to click and flip a card inside an ng-repeat <div class="card" ng-repeat="let card of cards"> <div class="flipcard" ng-class="{'flipped':isflipped}" ng-click="isflipped = !isflipped"> </div> </div> However in Angular 2 when clicked, it flipped every "card" inside the ngFor loop... how do I bind the ngClass condition to the element itself only? <div class="card" *ngFor="let card of cards"> <div class="flipcard" [ngClass]="{'flipped': isflipped }" (click)="isflipped = !isflipped;"> </div> </div> Change it to: <div class="card" *ngFor="let

This question already has an answer here: Hide/show individual items inside ngFor 5 answers Can some one please let me know how to toggle icons while doing ngFor? Problem Statement: I'm using *ngFor to loop through an array and display category names. On click of day I need to open an accordian and show category details (I can do this). Once accordian opens I need to replace fa-plus icon with fa-minus and vice-versa and I need to do this only for clicked day. How can I achieve this effectively? this.categoryList = [ {type: 'space', name: 'Space'}, {type: 'energy', name: 'Energy'}, {type:

Choosing a category: <ion-select name="categories"> <ion-option *ngFor="let category of categories;"> {{category}} </ion-option> </ion-select> Listing the items: <ion-item-sliding *ngFor="let item of items; let idx = index;"> <ion-item> <h2>{{item.title}}</h2> </ion-item> ... </ion-item-sliding> How can I use the value from (select) to choose which category gets listed? I tried adding a ngModule in and passing it as a condition into the sliding ngFor, but it wouldn't work. You can use a pipe to achieve this <ion-item-sliding *ngFor="let item of items | categorySelected; let idx = index;"> <ion

Is it possible to create input fields with a ngFor in a template driven form and use something like #name="ngModel" to be able to use name.valid in another tag? Right now we have a dynamic list of products with a quantity field and a add to cart button in a table. I want to make the whole thing a form with a add all button at the end like this: <form #form="ngForm"> <div *ngFor="item in items"> <input name="product-{{item.id}}" [(ngModel)]="item.qty" #????="ngModel" validateQuantity> <button (click)="addItemToCart(item)" [disabled]="!????.valid">Add to cart</button> </div> <button (click)=

I've got a whatsapp-like chat case of many types of messages that are needed to be displayed differently. Each has its' own component such as TextMessageComponent , FileMessageComponent , etc.. I'd like to be able to ngFor once on my array of messages without having to ngIf over the types. I've heard ngComponentOutlet might be the solution but found it hard to implement.. Any suggestions, a mini demo or anything you find useful would be highly appreciated! Having a property on the object should help you <div *ngFor="let item of items" style="border: solid 1px; padding: 20px;margin: 20px;">

Hi I have unordered list and all of them have active class. I want to toggle active class when clicked to any list item. My code is like this <ul class="sub_modules"> <li *ngFor="let subModule of subModules" class="active"> <a>{{ subModule.name }}</a> </li> </ul> can anyone help me to do this? Eduardo Vargas You can do something like: <ul class="sub_modules"> <li (click)="activateClass(subModule)" *ngFor="let subModule of subModules" [ngClass]="{'active': subModule.active}"> <a>{{ subModule.name }}</a> </li> </ul> On The component activateClass(subModule){ subModule.active = !subModule.active;

What am I doing wrong? import {bootstrap, Component} from 'angular2/angular2' @Component({ selector: 'conf-talks', template: `<div *ngFor="talk of talks"> {{talk.title}} by {{talk.speaker}} <p>{{talk.description}} </div>` }) class ConfTalks { talks = [ {title: 't1', speaker: 'Brian', description: 'talk 1'}, {title: 't2', speaker: 'Julie', description: 'talk 2'}]; } @Component({ selector: 'my-app', directives: [ConfTalks], template: '<conf-talks></conf-talks>' }) class App {} bootstrap(App, []) The error is EXCEPTION: Template parse errors: Can't bind to 'ngFor' since it isn't a known native

I have three buttons : All (Reals+ Fakes), Reals(total count), Fakes(total count) I am trying to get the total count of my total feeds which will be shown in All. And the total count of feed.feed_type != '' which will be shown Reals. And the total count of feed.feed_type == '' which will be shown Fakes. Feeds Model export class Feeds { feed_id: string; feed_category: string; feed_title: any; feed_description: string; feed_terms: string; feed_type: string; checked: false; } Feeds Component: import { Component, OnInit } from '@angular/core'; import { environment } from '../../environments