I have built a component based on the social card example in the docs. I have a ngFor to repeat the component.
<social-card *ngFor="post of posts"></social-card>
This does not render correctly because the built in Ionic styles require the wrapping HTML tag to be <card> but it is <social-card> so it does’t work. Is there a way around this?
No I did not. What does that do for me? I got the component to work, but the styling is not correct. I basically took the example for social cards and used it as a template inside a component.
import { Component, Input, Output, EventEmitter } from 'angular2/core';
import { Post } from './post';
@Component({
selector: 'sf-social-card',
templateUrl: 'build/components/social-card.component.html'
})
export class SfSocialCardComponent {
showReplies: Boolean;
@Input() post: Post;
@Output() reply: EventEmitter<any> = new EventEmitter();
onReply() {
this.showReplies = !this.showReplies;
}
}
The reason behind needing IONIC_DIRECTIVES is because this contains all of our components so you get all of the styling and JS that go along with every component/directive. The Page decorator already has this so that is why you can use Ionic components in each page without passing them in directives.
We probably should mention this in a separate doc somewhere.