สไตล์ของคอมโพเนนต์ Angular

ตอนนี้เรามากำหนดสไตล์ให้กับเลย์เอาต์ของเราโดยใช้ CSS กัน สำหรับสิ่งนี้เราจะต้องใช้ไฟล์ app.component.css ซึ่งเป็นที่ที่เราเขียน สไตล์ CSS สำหรับเลย์เอาต์ของคอมโพเนนต์ โดยในขณะเดียวกัน Angular เองจะดูแลให้สไตล์ ทำงานเหมือน CSS Modules นั่นหมายความว่า ตัวเลือกทั้งหมด (selectors) จะทำงานเฉพาะสำหรับ เลย์เอาต์ของคอมโพเนนต์นั้นเท่านั้น และจะไม่ส่งผลกระทบต่อ เลย์เอาต์ภายนอก

เรามาดูกันในทางปฏิบัติ สมมติว่าใน คอมโพเนนต์ของเรามีเลย์เอาต์ดังต่อไปนี้:

app/app.component.html<div>
  abcde
</div>

เรามากำหนดสีให้กับ div:

app/app.component.cssdiv {
  color: red;
}

ในขณะเดียวกัน เราสามารถมั่นใจได้ว่า สไตล์จะถูกนำไปใช้เฉพาะกับ div จากคอมโพเนนต์ของเราเท่านั้น และไม่ใช่กับ div อื่นๆ