# Day05 【牙起來】 樣板中的標籤與樣式

## 程式主元件 - `app-component`

運行Angular時，最根部的元件是 `app.component.html`
所有的元件都必須長在他裡面、依他而行

在 `app.component.html` 中，加入`<app-role>`以及`<app-store>`標籤

<h1>Angular牙起來</h1>
<app-role></app-role>
<app-store></app-store>

透過這種方式呼叫所建立的元件，呈現在畫面上


會出現 `role works!`、`store works!` 這兩行文字當然是因為這兩個元件的樣版有這一段啦


現在來修改一些東西試試



> 往後當我們提到 **樣板**就是**HTML .html檔**、**樣式**就是**CSS .css檔**、**程式**就是**Typescript .ts檔**

## 在樣板中的標籤 - `component`

現在因為我想將畫面切開來，區分左側欄，將`role`及`store`挪到畫面左側位置
所以再產生一個新元件叫`left-column`
元件名稱中可以有減字號`-`

(路徑: src/app)
> ng g c left-column


接著要做一件酷的事情，在`left-column.compoennt.html`中寫入

<p>我是左側區塊</p>
<app-role></app-role>
<app-store></app-store>


然後在 `app.component.html` 中修改，留下這一行

<app-left-column></app-left-column>


最終畫面變成這樣


此時在 `left-column` 元件中，有一段文字敘述，同時底下包含 `role`、`store` 兩個元件

### 套用樣式 - 行內 inline style

可以在樣板上使用 `inline style` 套用樣式

在 `left-column.component.html` 中新增背景顏色

<div style="background-color: gold">
  <p>我是左側區塊</p>
  <app-role></app-role>
  <app-store></app-store>
</div>


在 `app.component.html` 中修改 `left-column` 顯示的寬度

<app-left-column style="width: 20%; display: block"></app-left-column>


對元件標籤直接使用時，建議加上 `display: block` 才看得出效果
（因在HTML中自定義的標籤預設是 `display: inline` 的，不過[**也有辦法**](https://stackoverflow.com/questions/51032328/angular-component-default-style-css-display-block)可以調整此項預設）

或者直接拿一層 `<div>` 包住元件，限制住 `<div>` 的寬度也行

在 `app.component.html` 中修改為

<div style="width: 20%;">
  <app-left-column></app-left-column>
</div>


完成的畫面結果


### 套用樣式 - 內部 internal style

原本在HTML中能起作用的，到Angular元件內基本都能夠生效

在 `app.component.html` 中修改為

<div>
  <app-left-column></app-left-column>
</div>

<style>
  div {
    padding: 20px;
    background-color: red;
  }
</style>

畫面結果

### 套用樣式 - css檔案

接著在 `app.component.css` 中新增CSS樣式

div {
  width: 20%;
}

app-left-column {
  display: block;
  padding: 10px;
  background: pink;
}

Angular把所有元件都切分開來，有獨自的
**只有在此元件中才吃的到 這個檔案中的CSS樣式設定**

最終完成畫面

> 恭喜到這一步，已經完成**30%的Angular**！