How to use Ionic components inside custom components/directives

Ionic Framework ionic-v3
1

I am new to ionic and trying different things while going through your articles and video tutorials which are very helpful. I created a very simple component and used ionic component ion-list inside this component. This component displays list but it does not apply ionic style.

Component JS Code:
import {Component, View, Input} from ‘angular2/angular2’;

@Component ({

selector: ‘todo-renderer’
})

@View ({

templateUrl: ‘app/todo/todorenderer.html’
})

export class TodoRenderer {

@Input() todos;
constructor(){
}
}

HTML Code:
<ion-list>
<ion-item *ng-for="#todo of todos" >{{todo.subject}}</ion-item>
</ion-list>

image
list.png295×643 4.91 KB

Generated HTML Snippet:

<todo-renderer><ion-list>
<script></script><ion-item>JavaScript</ion-item><ion-item>AngularJS</ion-item><ion-item>Ionic</ion-item>
</ion-list></todo-renderer>

2

You have to import the Ionic components and register them as ‘directives’ :

import {Component} from 'angular2/angular2';
import {List, Item} from 'ionic/ionic';

@Component({
    selector: 'test-list',
    templateUrl: 'app/test-list/test-list.html',
    directives: [List, Item]
})
export class TestList {
    constructor() {
    }
}

There is one thing missing still; I posted a question how to get a handle for those Ionic components inside the custom component – to use the methods. Seems the Ionic components inside a custom components do not register themselves into the IonicApp - so getComponent('id') is not working.

5 Likes
3

Sorry for my English.
I have the same issue but for other components:

<ion-navbar *navbar> <ion-title> {{title}} </ion-title> </ion-navbar>

How can i find name of other ionic components?

import {Navbar} from ‘ionic-framework/ionic’;
or
import {Navbar, Title} from ‘ionic-framework/ionic’;

Didn’t help.

Update
import {NavbarTemplate, Navbar} from ‘ionic-framework/ionic’;
Solved my problem.

1 Like
4

Try import {IONIC_DIRECTIVES} from 'ionic-framework/config/directives'; @snikh
This will grab all the existing ionic components with no additional overhead.

4 Likes
5

Trying to get this to work, the icons aren’t rendering… What am I missing?

import {Component} from ‘angular2/core’;
import {NgIf} from ‘angular2/common’;
import {SocketService} from ‘…/services/socket.service’;
import {IONIC_DIRECTIVES} from ‘ionic-angular/config/directives’;

@Component({
selector: “connection-status”,
template:<span style="float:right;padding-right:20px;font-size:18px">Status: <ion-icon *ngIf="connected()" name="flash"></ion-icon> <ion-icon *ngIf="!connected()" name="flash-off"></ion-icon> </span>,
directives:[IONIC_DIRECTIVES]

})

export class ConnectionStatusComponent {

connected(){
    return SocketService.getSocket().connected;
}

}

1 Like
6

Another thing that I’m slightly confused on is I see the imports coming from various places, but the only one that doesn’t fail for me (with import) is

import {STUFF} from ‘ionic-angular’;

‘ionic/ionic’ doesn’t work or ‘ionic-framework’

I’ve tried several different to see if my import was just pulling the wrong classes in, but I’m getting no love with the icons. The curious thing is that the markup IS being transcluded, just the actual icons aren’t visible.

7

the flash-off icon isn’t available in the current icon set. I changed the icon and it’s working :slight_smile:

8

The path to import {STUFF} from ionic has changed with the newer realises. That’s why you are importing from ionic-angular. :slight_smile: