Angular GeneratorでComponentを追加する
前回StackBlitzでAngularプロジェクトを作成しました。
でなんとなくどういう構成になっているかみて分かった気になりました。
じゃぁこれからどうするんだって事ですが、右クリックして見ると
Angular Generatorという欄に色々表示されます。
多分これがAngularの要素ですね。って事でAngularの公式サイト見ると
やっぱりそうらしいです。
https://angular.jp/start#コンポーネント
とりあえず一番上のコンポーネントを作ってみます。
コンポーネントを作成すると以下のフォルダが追加されました。
- button.component.css
cssはきっとbutton.component.htmlのタグを修飾するためでしょう。
- button.component.html
button works!ってなってます。後で変えましょう。
- button.component.ts
classってあります。TypeScriptのクラスを調べましょう。
とにかくこれでコンポーネントというものを追加できました。
じゃぁこれを表示するにはどうしたらいいでしょう。
前回調べましたが、selectorに設定されている名前をタグのように書くと
表示されていました。
試しにタグを設定してみます。
表示されました。
せっかくボタンという名前をつけたのでボタンを設定してみたいと思います。
ただAngularにはおしゃれなボタンを設定できるライブラリが
用意されているようですので、そちらを使ってみます。
@angular/materialを使って次回ボタンを表示してみます。
