将子组件注入父组件会扭曲样式

Question

I have asked this before and others did but for the life of me, I still can't fix it. Here is a stackblitz for you to see: https://stackblitz.com/edit/angular-dpcbxm

which is pretty descriptive. I honestly have read a lot about view encapsulation and how it affects injected child components but the 3 settings didn't change anything (nor I want to mess with it in the first place). I tried doing it via selector: '[hello]' then ..... as well but it changes nothing.

I notice a lot of styles are inserted such as ng_content-c4, c6... while I don't know why the child component would have different values than others, I do get they are internal.

In the angular encapsulation page, I did see about styling such components [_ng_content-c6] etc but they are applied to different elements of the child component at a given time that I don't know what to style nor what style to define for them since the style I need is defined for them.

Can someone take a look and help me fix it?

Answer 1

I was able to apply the styles defined on the parent to the child component by disabling style encapsulation.

On Parent:

import {ViewEncapsulation} from '@angular/core';

and also

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  encapsulation: ViewEncapsulation.None
})

I'm getting some erros on the Blitz you share, but at least styling is working. https://stackblitz.com/edit/angular-4grbtd