Angular 2 CSS Color

Angular 2 CSS color property it allows us to change the color of the text inside an HTML element. (e.g. div)

angular 2 css color
angular 2 css color

Try it yourself,Live Example

try angular 2 css color
try angular 2 css color

Let’s discover our example :

angular 2 css color
angular 2 css color

This is the code source of our example:

/**
 * Created by Tareq Boulakjar. from angulartypescript.com
 */
import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: `<h3 class="angular-2-css-color">Angular 2 CSS Color Property Example </h3>
               <hr>
               <p>
                We explain CSS Color property.  The property syntax:<br>
                <span>color: color<span class="highlight"> | </span>initial<span class="highlight"> | </span>inherit;</span><br>
                You can choose a <span class="highlight-my-text">color</span>, <span class="highlight-my-text">initial </span> color or <span class="highlight-my-text">inherit</span> the color from the parent property.<br>
               </p>
               <span class=""></span>

               `,
    styles:[`
                        .angular-2-css-color {
                          color:#00b3ee;
                        }

                        p {
                          color: initial;
                        }

                        span {
                          color: #e57c00;
                        }

                        .highlight-my-text {
                          background-color: #7be500;
                          color: inherit;
                        }

                        .highlight{
                          background-color: #0000AA;
                          color: yellow;
                        }

           `],
    

})
export class Angular2CSSColorComponent { }

 

Done!