え!?ここにある部品全て使えるの!?
CSSをほぼ書かずただ部品を書くだけで本格的な部品が書けるらしいので本日は実践してみようと思います。
Components | Angular Material
![](https://i0.wp.com/stone1003.com/wp-content/uploads/2024/03/image-3.png?resize=1024%2C480&ssl=1)
Angular Materialの使い方
![](https://i0.wp.com/stone1003.com/wp-content/uploads/2024/03/image-4.png?resize=704%2C521&ssl=1)
例えばこのInputの部品が使いたい場合をやっていこうと思います。
このInputをクリックすると下記の<>をクリックし、コードを表示させる。
![](https://i0.wp.com/stone1003.com/wp-content/uploads/2024/03/image-5.png?resize=1024%2C479&ssl=1)
![](https://i0.wp.com/stone1003.com/wp-content/uploads/2024/03/image-6.png?resize=772%2C397&ssl=1)
![](https://i0.wp.com/stone1003.com/wp-content/uploads/2024/03/image-7.png?resize=655%2C497&ssl=1)
そしてHTMLを「app.component.html」、TSを「app.component.ts」へ貼り付ける。
(必要なmoduleをtsへ記載する)
![](https://i0.wp.com/stone1003.com/wp-content/uploads/2024/03/image-8.png?resize=537%2C147&ssl=1)
![](https://i0.wp.com/stone1003.com/wp-content/uploads/2024/03/image-9.png?resize=823%2C366&ssl=1)
これをやるだけでサイトで使われているような部品を簡単に使うことが出来るみたいです。
![](https://i0.wp.com/stone1003.com/wp-content/uploads/2024/03/image-10.png?resize=751%2C368&ssl=1)
まとめ
これはすごいですね。全てAngularMaterialの中に入っているため、コーディング量が少なく済みますね。バックへの値渡しなども出来そうですし、これは使える気がします。
どんどん使っていきたいですね!
コメント