2

I upgraded to Angular2 final release this morning and noticed that the CSS styles I was using in previous release candidates are no longer working. I need to control the look a HTML element wihtin a child component from the parent.

Here's my HTML:

 <div id="intro"> <stm-video [video]="PageData.WelcomeVideo"></stm-video> </div>

Here's my CSS:

:host ::shadow { stm-video { .video-container { height: 80vh; width: inherit; } } }

.video-container is a HTML element inside . I want to set the height of video-container when it's loaded in parent page. This used to work in Angular2 RC 4 and 5. Stopped working today after installing Angular2 final release.

Is there a more appropriate way to handle this?

Improve this question

3 Answers 3

Reset to default
2

Thank you Gunter and Clint. With your suggestions, here is what I arrived at for solving this problem (using LESS to generate CSS):

@deep: ~">>>"; :host { stm-video { @{deep} { .video-container { height: 80vh; width: inherit; } } } }

having @{deep} directly under :host affects all child nodes, but putting it inside the child element just affects the styles within that child node (stm-video).

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

Comments

1

:host is still supported. ::shadow is not supported. As far as I know it never was. ::content is ignored. /deep/ and >>> are equivalent and are both still supported.

:host >>> { stm-video { ...

should do what you want.

See also Custom Styling on <ng-content> in angular2 not working ?

Improve this answer

Comments

1

I think what you are looking for here is /deep/. It applies the styles down through child components. In your parent styles you would have.

/deep/ .video-container { height: 80vh; width: inherit; }
Improve this answer

2 Comments

is :host no longer supported with Angular2 final release? /deep/ doesnt seem to work with LESS though
@TomSchreck Host should still work. You may need to use :host /deep/ instead, I wasn't sure of the element structure by the wording of your post. Is /deep/ removed from the css?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.