Hi, I want to build a responsive template for my app on mobile and tablet resolution.
I have 4 classic views (Component), I want to gather them on tablet (big) resolution, schema :
My question is : how can I reuse my component’s templates to build my full view component template?
Is it possible to include it from js/html? the willl is to avoid code copy/paste …
maybe it’s stupid but is it possible to build nested component in ionic2?
Thanks for your help, I didn’t find a solution sorry if it exists somewhere
Finally the solution is a basic concept of Angular2.
So the way to create UI elements, and to reuse them in different pages is possible thanks to Component
create a new component :
cmd> ionic g component my-component
create custom template, attributes, methods
import { Component } from '@angular/core';
@Component({
selector: 'my-component',
template: '<div>Hello my name is {{name}}. <button (click)="sayMyName()">Say my name</button></div>
})
export class MyComponent {
constructor() {
this.name = 'Max'
}
sayMyName() {
console.log('My name is', this.name)
}
}
and add it into your pages
import { Component } from '@angular/core';
import { MyComponent } from '../components/my-component/my-component'
@Component({
template: '<ion-content>PAGE ONE : <my-component></my-component></ion-content>',
directives: [MyComponent]
})
export class MyPageOne {
constructor() {
}
}
import { Component } from '@angular/core';
import { MyComponent } from '../components/my-component/my-component'
@Component({
template: '<ion-content>PAGE TWO : <my-component></my-component></ion-content>',
directives: [MyComponent]
})
export class MyPageTwo {
constructor() {
}
}