Angularで子要素のwidthの指定方法がわかりません。

Question

以下のようなHTMLで

app.component

<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
</div>

child1のwidthを80%, child2のwidthを20%にしていました。

ここでchild1を新しくcomponentとして切り出し以下のようにしました。

app.component

<div class="parent">
  <app-child1></app-child1>
  <div class="child2"></div>
</div>

　
child1.component

<div class="child1"></div>

ここでchild1のwidthを80%にしたのですがうまく行きません。。。
前よりだいぶ小さくなっており、親のwidthの80%になっていないのです。

この場合、どうすれば親のwidthの80%にできるのでしょうか？

適用しているスタイルの一覧は以下です。
以前のスタイルはchild1.componentのスタイルをそのままapp.componentに書いていただけです。

　
app.component

.parent {
 display: flex;
}

.child2 {
  border-style: solid;
  width: 20%;
  margin-left: 2%;
  margin-right: 2%;
}

　
child1.component

.child1 {
  border-style: solid;
  width: 80%;
  margin-left: 2%;
}

（margin-leftも以前と違う感じになっていました。。。）

Answer 1

解決済ですが今後同じような事象によく直面すると思いますので別解を一応書いておきます。
コンポーネント自身（app-child1）にスタイルを当てる場合、そのコンポーネントで読み込んでいるcssファイル内で
:hostセレクタを使うことで当てることが出来ます。

// app-child1.component.css
:host{
  width:80%;
  display: block;
}

この場合app-child1コンポーネント内の<div class="child1"></div>は不要になりますので消しておきましょう。

Comments

[kuuritar]

ありがとうございます！
これは知りませんでした！

Answer 2

ちょっと希望と違うかもしれませんが

app.component.cssで

app-child1{
width:80%;
}

としてから
app-child1の中身はapp-childの中で100%に広がるように書き直すと一応できます。

Comments

[kuuritar]

ありがとうございます！
上記は試してもうまく動かなかったのです；

本日自己解決しましたが、selectorにclassを付与してそのclassに対してスタイルを当てることで実現できました！