Responsive layout design

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() {
  }
}
1 Like