CODEWITHSUNDEEP
cordovaionic3angular2-directives
Pratik Sinha
Pratik Sinha

Reputation: 244

Directives not working in ionic 3

Directive example in ionic 3, method used previously are not working. Already tried the way in which directives where implemented in ionic 2.

import {Directive} from 'angular2/core';

@Directive({
   selector: 'test',
   template: './test.html'
)}
export class MyDirective { }

import {MyDirective } from './test'

@Page({
   templateUrl: '../page.html',
   directives: [MyDirective ],
})

Upvotes: 0

Views: 586

Answers (1)

Wesley Coetzee
Wesley Coetzee

Reputation: 4848

This can be achieved with the following:

ComponentA, parent component

acomponent.ts

import {Component} from '@angular/core';

@Component({
    selector: 'component-a',
    templateUrl: 'acomponent.html'
})
export class ComponentA { }

acomponent.html

<div>
  <h3>Component A</h3>
  <component-b></component-b>
</div>

bcomponent.ts

import {Component} from '@angular/core';

@Component({
    selector: 'component-b',
    templateUrl: 'bcomponent.html'
})
export class ComponentB { }

bcomponent.html

<h3>Component B</h3>

app.module.ts

import { ComponentA } from 'pathto/acomponent';
import { ComponentB } from 'pathto/bcomponent';
//other imports here too

@NgModule({
  declarations: [
    ComponentA,
    ComponentB,
    //other declarations
  ],
  imports: [//your imports],
  bootstrap: [IonicApp],
  entryComponents: [
    ComponentA,
    ComponentB,
    //other entryComponents
  ],
  providers: [//your providers]
})
export class AppModule { }

When you navigate to ComponentA it will then inject ComponentB onto the selector <component-b></component-b>

Hopefully this helps

Upvotes: 2

Related Questions