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) {
}
}