Angular 2 make components overlap each other

Question

Angular 2 puts a component under or next to another by default.

Is it possible to get them to overlap at will?

Thanks.

Answer 1

A component is nothing more than an HTML element. You have to use css to have them overlap. To target the component itself, you have to use the :host selector:

@Component({
   selector: 'app',
   template: `
       <a-component></a-component>
       <b-component></b-component>
   `
})
export class AppComponent{}

a-component

@Component({
   selector: 'a-component',
   template: 'I am A',
   style: [`
      :host {
          position: fixed, 
          top: 0,
          left: 0
      }  
   `]
})
export class AComponent{}

This component will overlap the other component:

b-component

@Component({
   selector: 'b-component',
   template: 'I am B',
   style: [`
      :host {
          position: fixed, 
          top: 0,
          left: 0
      }  
   `]
})
export class BComponent{}