Rasmus Rajje Josefsson Rasmus Rajje Josefsson - 4 months ago 11
CSS Question

Use full width of one component Angular2

I wonder if anyone know how you set full width of one component with an background in Angular 2. Just want to use it on the home screen.

Following changes all the components so that doesn't work.

encapsulation: ViewEncapsulation.None,

Answer

If you are using ViewEncapsulation.None, then you can do it like this:

@Component({
  selector: 'my-component',
  providers: [],
  template: `
    <div>
      Hello
    </div>
  `,
  styles:
  [
      'my-component { float:left;width:100%;padding:5px;background:#ccc;}',
      'html, body {margin:0px; }' 
  ],
  encapsulation: ViewEncapsulation.None
})

See Plunker here: https://plnkr.co/edit/b3jtpO5TAkV4eK0ZuR1k?p=preview

Comments