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

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - https://code-sample.com and https://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions