Using ionic2 tags inside custom components

Question

Ionic Setup:

Ionic Framework: 2.3.0

Ionic App Scripts: 1.1.4

Angular Core: 2.4.8

Angular Compiler CLI: 2.4.8

Node: 4.2.6

I'm new at ionic and angular and I'm trying to create a custom component using ionic tags, take a look at my code:

mynavbar.component.ts

import {Component} from "@angular/core";
import {IONIC_DIRECTIVES} from 'ionic-angular';

@Component({
  selector: 'my-navbar',
  directives: [IONIC_DIRECTIVES],
  templateUrl: 'mynavbar.component.html'
})

export class MyNavbarComponent {}

and here is my templateUrl:

<ion-header>
  <ion-toolbar>
    <ion-buttons start>
       <button ion-button icon-only>
         <ion-icon name="contact"></ion-icon>
       </button>
    </ion-buttons>
    <ion-title>MyApp</ion-title>
    <ion-buttons end>
       <button ion-button icon-only>
         <ion-icon name="pin"></ion-icon>
       </button>
    </ion-buttons>
  </ion-toolbar>
  <ion-segment color="primary">
    <ion-segment-button value="pessoas">
       Pessoas
    </ion-segment-button>
    <ion-segment-button value="grupos">
     Grupos
    </ion-segment-button>
  </ion-segment>
 </ion-header>

and I'm receiving this error: has no exported member 'IONIC_DIRECTIVES'. I'm trying to import the IONIC_DIRECTIVES because I saw some anwsers here saying to import that in our component if we want to use ionic tags inside custom components but I'm receiving this error.

@edit If I choose to not import Ionic_Directives I receive no error but all ionic tags that I use in the custom component lose all style

Yuvraj Patil Yuvraj Patil · Accepted Answer · 2017-03-29T12:56:50

If you have created your project using Ionic2 template project, there is no need of importing IONIC_DIRECTIVES.

Remove that import of IONIC_DIRECTIVES and it's entry from directives decorator.

Using ionic2 tags inside custom components

1 Answers