Angular 6 - Styles are not working when using ng-content

Question

I have some code and I'm having issues with the css which is not targetting when using <ng-content></ng-content>

Here is the code:

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

@Component({
  selector: 'app-embed',
  template: `<ng-content></ng-content>`,
  styles: [`

  app-embed {
    position:relative;
     width:100%;
     height:0;
     padding-bottom:33%;
  }

 app-embed iframe {
    width: 100vw;
    height: 56.25vw;
  }`]
})
export class AppEmbedComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

How do I fix this?

Teddy Sterne · Accepted Answer · 2018-05-24 20:05:17Z

1

You should put the styles of the content in the component that embeds them. If you want to style the AppEmbedComponent tag then you need to use the :host psuedo selector to do so.

embed.component.ts

@Component({
  selector: 'app-embed',
  template: `<ng-content></ng-content>`,
  styles: [`
    :host {
      position:relative;
      width:100%;
      height:0;
      padding-bottom:33%;
    }
  `],
})
export class AppEmbedComponent {}

other.component.ts

@Component({
  selector: 'app-other',
  template: `
    <app-embed>
      <iframe src="//www.google.com"></iframe>
    </app-embed>
  `,
  styles: [`
    iframe {
      width: 100vw;
      height: 56.25vw;
    }
  `],
})
export class AppOtherComponent {}

Demo

edited May 24, 2018 at 20:05

answered May 24, 2018 at 18:36

Teddy Sterne

14.3k2 gold badges49 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 6 - Styles are not working when using ng-content

1 Answer 1

Demo

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related