css angular

How To Add CSS Styles in Angular 4 and Angular 5 Applications?

In this article post, I am sharing the knowledge about creating and using the CSS Styles and StyleUrls a simple component in Angular 4 or Angular 5.

In the below example, I am using the “Button CSS” in Angular 5 application login my page and it contains three steps –
1.     login.component.css
2.     login.component.html
3.     login.component.ts

Example 1 – Using the StyleUrls
login.component.css -
h2 {
    font-size: 15px;
    background-color: green;
}

.btn {
    border-radius: 0;
}

.btn-primary {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
}


login.component.html -
<form>
  <label>Email</label> <input type="email" #email>
  <label>Password</label> <input type="password" #password>
  <button type="button"
          (click)="login(email.value, password.value)"
          [disabled]="!enabled" class="btn btn-primary">Login
  </button>
</form>

login.component.ts
import { Component, OnInit, EventEmitter,Input, Output, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class LoginComponent implements OnInit {

  @Output() loggedIn = new EventEmitter<User>();
  @Input() enabled = true;

  constructor() { }
  ngOnInit() { }

  login(email, password) {
    if (email && password) {
       this.loggedIn.emit(new User(email, password));
    }   
    console.log(`Login ${email} ${password}`);
  }
}

export class User {
  constructor(public email: string, public password: string) {  }
}

Example 2 – Using the Styles
import { Component, OnInit, EventEmitter,Input, Output, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styles: [`
        h2 {
          font-size: 15px;
          background-color: green;
        }
       
        .btn {
            border-radius: 0;
        }
       
        .btn-primary {
            display: inline-block;
            padding: 6px 12px;
            margin-bottom: 0;
            font-size: 14px;
            font-weight: normal;
            line-height: 1.42857143;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            -ms-touch-action: manipulation;
            touch-action: manipulation;
            cursor: pointer;
            background-image: none;
        }`
  ],
  encapsulation: ViewEncapsulation.None
})
export class LoginComponent implements OnInit {

  @Output() loggedIn = new EventEmitter<User>();
  @Input() enabled = true;

  constructor() { }

  ngOnInit() {  }

  login(email, password) {
    if (email && password) {
       this.loggedIn.emit(new User(email, password));
    }
   
    console.log(`Login ${email} ${password}`);
  }
}

export class User {
  constructor(public email: string, public password: string) {
  }
}


I hope you are enjoying with this post! Please share with you friends. Thank you!!
ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.
^