.class-success{\r\n color:green;\r\n}\r\n\r\n.class-fail{\r\n color:red;\r\n}\r\n\r\n.class-special{\r\n font-style: italic;\r\n}<\/pre>\n- \n
- In first-app.component.ts<\/b>, include an <h2><\/b> element as shown below. Notice we have set the class attribute of the <h2><\/b> element to \u2018class-success\u2019<\/b>.<\/li>\n<\/ul>\n
import { Component, OnInit } from '@angular\/core';\r\n\r\n@Component({\r\n selector: 'app-first-component',\r\n template: `<h2 class='class-success'>Code 4 Developers<\/h2> `,\r\n styleUrls: ['.\/first-component.component.css']\r\n})\r\n\r\nexport class FirstComponentComponent implements OnInit {\r\n constructor() { }\r\n ngOnInit() {\r\n }\r\n}<\/pre>\nAt this point, run the application and notice that the class-success <\/b> is added to the <h2> element as expected.<\/p>\n
<\/p>\n
Modify the code in first-component.component.ts as shown below.<\/b><\/p>\n
- \n
- We have added a property ‘classesToApply’<\/b>in FirstComponent class.<\/li>\n
- We have also specified class binding for the <h2> element. The word ‘class’ is in a pair of square brackets and it is binded to the property ‘classesToApply’<\/li>\n
- This will replace the existing css classes of the <h2> with classes specified in the class binding.<\/li>\n<\/ol>\n
import { Component, OnInit } from '@angular\/core';\r\n\r\n@Component({\r\n selector: 'app-first-component',\r\n template: `<h2 class='class-success' [class]='classesToApply'>Code 4 Developers<\/h2> `,\r\n styleUrls: ['.\/first-component.component.css']\r\n})\r\n\r\nexport class FirstComponent implements OnInit {\r\n public classesToApply='class-fail class-special'\r\n constructor() { }\r\n ngOnInit() {\r\n }\r\n}<\/pre>\nRun the application and notice class-success <\/b>is removed and class-fail<\/b>, class-special\u00a0<\/i><\/b>classes are added.<\/p>\n
Add or Remove single class<\/h4>\n
- \n
- To add or remove a single class, include the prefix ‘class’ in a pair of square brackets, followed by a DOT and then the name of the class that you want to add or remove.<\/li>\n
- The following example adds class-special<\/b> to the <h2> element. Notice it does not remove the existing class-success already added using the class attribute.<\/li>\n
- If you change applySpecialClass property to false or remove the property from the FirstComponent class, css class is not added to the <h2> element.<\/li>\n<\/ul>\n
Example :<\/b><\/p>\n
import { Component, OnInit } from '@angular\/core';\r\n@Component({\r\n selector: 'app-first-component',\r\n template: `<h2 class='class-success' [class.class-special]='applySpecialClass'>Code 4 Developers<\/h2> `,\r\n styleUrls: ['.\/first-component.component.css']\r\n})\r\n\r\nexport class FirstComponent implements OnInit {\r\n public applySpecialClass =true;\r\n constructor() { }\r\n ngOnInit() {\r\n }\r\n}<\/pre>\nYou can also remove an existing class that is already applied.<\/p>\n
Consider the following example. Notice we have 3 classes (class-success<\/b> & class-special<\/b><\/i>) added to the <h2> element using the class attribute. The class binding removes the class-special.<\/p>\n
Example:<\/b><\/p>\n
import { Component, OnInit } from '@angular\/core';\r\n\r\n@Component({\r\n selector: 'app-first-component',\r\n template: `<h2 class='class-success class-special'[class.class-special]='applySpecialClass'>Code 4 Developers<\/h2> `,\r\n styleUrls: ['.\/first-component.component.css']\r\n})\r\n\r\nexport class FirstComponent implements OnInit {\r\n public applySpecialClass =false;\r\n constructor() { }\r\n ngOnInit() {\r\n }\r\n}<\/pre>\nTo add or remove multiple classes use ngClass directive as shown in the example below.<\/b><\/p>\n
- \n
- Added three public property with default values in FirstComponent:<\/li>\n<\/ol>\n
public isSuccess=false;\r\npublic isFail=true;\r\npublic isSpecial=true;<\/pre>\n
- \n
- Add object styleClasses having with 3 key\/value pairs. The key is a CSS class name. The value can be true or false. True to add the class and false to remove the class.<\/li>\n<\/ol>\n
public styleClasses ={\r\n\"class-success\": this.isSuccess,\r\n\"class-fail\":this.isFail,\r\n\"class-special\":this.isSpecial\r\n}<\/pre>\n- \n
- Since two keys (class-fail<\/b> & class-special<\/b><\/i>) are set to true, both classes will be added to the <h2> element. Here class-success<\/b> will not apply as corresponding property value isSuccess is false.<\/li>\n
- Use ngClass directive with square bracket in HTML code and assign object name.<\/li>\n<\/ol>\n
<h2 [ngClass]=\"styleClasses\">Code 4 Developers<\/h2><\/pre>\n
Example for ngClass directive:<\/b><\/h4>\n
import { Component, OnInit } from '@angular\/core';\r\n\r\n@Component({\r\n selector: 'app-first-component',\r\n template: `<h2 [ngClass]=\"styleClasses\">Code 4 Developers<\/h2> `,\r\n styleUrls: ['.\/first-component.component.css']\r\n})\r\n\r\nexport class FirstComponent implements OnInit {\r\n public isSuccess=false;\r\n public isFail=true;\r\n public isSpecial=true;\r\n\r\n public styleClasses ={\r\n \"class-success\": this.isSuccess,\r\n \"class-fail\":this.isFail,\r\n \"class-special\":this.isSpecial\r\n }\r\n\r\n constructor() { }\r\n\r\n ngOnInit() {\r\n }\r\n\r\n}<\/pre>\nRun the application and notice class-success<\/b> is not applied as the component property isSuccess is set to false but class-fail<\/b> and class-special<\/i><\/b> is applied because isFail is set to true and isSpecial is set to true.<\/p>\n
In this article we will see how can we bind CSS class to HTML element (class binding) in Angular 5. We will also discuss about ngClass directive to add or…<\/p>\n","protected":false},"author":5,"featured_media":2649,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[28],"tags":[29,173,175,174],"powerkit_post_featured":[],"class_list":{"0":"post-3520","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-angular","8":"tag-angular","9":"tag-angular-5","10":"tag-class-binding","11":"tag-ngclass"},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular-2.png?fit=240%2C240&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8NAi4-UM","jetpack-related-posts":[{"id":3007,"url":"https:\/\/code4developers.com\/angular-4-components\/","url_meta":{"origin":3520,"position":0},"title":"Angular 4 Components","author":"Nisarg Dave","date":"July 28, 2017","format":false,"excerpt":"In this article, we will discuss about what is a component in Angular 4? In Angular 4 everything is component. Rather we can say components are the basic building blocks of Angular 4 applications. Component based web development is the future of web development.\u00a0The advantage of the component-based approach is\u2026","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular-2.png?fit=240%2C240&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":14480,"url":"https:\/\/code4developers.com\/angular-custom-elements\/","url_meta":{"origin":3520,"position":1},"title":"Angular Custom Elements: Creating Reusable Components with Angular","author":"Yatendrasinh Joddha","date":"April 19, 2023","format":false,"excerpt":"Angular Custom Elements allow you to create reusable components that can be used in non-Angular applications. Custom Elements are a powerful feature that can help you share code across multiple projects and platforms. In this article, we'll take a closer look at Angular Custom Elements and show you how to\u2026","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"Angular Custom Elements","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2023\/04\/Custom-elements.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2023\/04\/Custom-elements.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2023\/04\/Custom-elements.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2023\/04\/Custom-elements.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2023\/04\/Custom-elements.png?resize=1050%2C600&ssl=1 3x"},"classes":[]},{"id":3245,"url":"https:\/\/code4developers.com\/interpolation-property-binding-in-angular-4\/","url_meta":{"origin":3520,"position":2},"title":"Interpolation & Property Binding in Angular 4","author":"Nisarg Dave","date":"February 22, 2018","format":false,"excerpt":"In this article, we will discuss about interpolation and property binding in Angular 4. Both are used to bind component class properties to view template. Examples Let\u2019s take simple example of both We will bind imagePath property of the component class to\u00a0
element src property using interpolation as shown below.
- Use ngClass directive with square bracket in HTML code and assign object name.<\/li>\n<\/ol>\n
- Since two keys (class-fail<\/b> & class-special<\/b><\/i>) are set to true, both classes will be added to the <h2> element. Here class-success<\/b> will not apply as corresponding property value isSuccess is false.<\/li>\n
- Add object styleClasses having with 3 key\/value pairs. The key is a CSS class name. The value can be true or false. True to add the class and false to remove the class.<\/li>\n<\/ol>\n
- If you change applySpecialClass property to false or remove the property from the FirstComponent class, css class is not added to the <h2> element.<\/li>\n<\/ul>\n
- We have added a property ‘classesToApply’<\/b>in FirstComponent class.<\/li>\n
![\"\"](\"https:\/\/code4developers.com\/wp-content\/uploads\/2018\/05\/8.1-300x100.png\")
<\/p>\n![\"\"](\"https:\/\/code4developers.com\/wp-content\/uploads\/2018\/05\/8.2-300x78.png\")
<\/p>\n![\"\"](\"https:\/\/code4developers.com\/wp-content\/uploads\/2018\/05\/8.3-300x73.png\")
<\/p>\n![\"\"](\"https:\/\/code4developers.com\/wp-content\/uploads\/2018\/05\/8.4-300x74.png\")
<\/p>\n","protected":false},"excerpt":{"rendered":"