Custom Components and Ionic Styles

Ionic Framework ionic-v3
1

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?

Thanks.

2

Did you import IONIC_DIRECTIVES and put it in @Component directives?

3

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;
    }

}
4

Is that applicable only to older versions of ionic 2? I cannot find any documentation for this in the latest release.

5

I don’t remember what I saw that, but you can go here, they talked about it too.

6

The docs that mention IONIC_DIRECTIVES are mentioned in the Page API docs: http://ionicframework.com/docs/v2/api/decorators/Page/

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.

1 Like