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