Today I'll show you how to set Title in angular of Website, to accomplish this matter you may refer to the articles below, just a few lines of code you can change the title of the website in angular, if you use angular to post a website, then you must make this issue to be able to bring a good quality website.
Steps setTitle in angular or you can clone the project on github.
Step 1. create new app
Step 4. Add "Title" in file app.module.ts
Step 5. Edit HTML and Css, Ts in component app
app.component.html
app.component.scss
app.component.ts
Step 6. HTML, CSS and Ts in component Home
home.component.html
home.component.scss
home.component.ts
Step 7. HTML, CSS and Ts in component Login
login.component.html
login.component.scss
login.component.ts
Step 8. HTML, CSS and Ts in component Register
register.component.html
register.component.scss
register.component.ts
This is code change title in angular
Steps setTitle in angular or you can clone the project on github.
Step 1. create new app
ng new SettitleAngularStep 2. Create all component
ng g c homeStep 3. Add router in file app-routing.module.ts
ng g c login
ng g c register
const routes: Routes = [
{
path :'home',
component: HomeComponent
},
{
path :'login',
component: LoginComponent
},
{
path: 'register',
component: RegisterComponent
}
];
Step 4. Add "Title" in file app.module.ts
@NgModule({
declarations: [
AppComponent,
HomeComponent,
LoginComponent,
RegisterComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [
Title
],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.html
<div class="content">
<h1>Set Title in Angular of Website</h1>
<a (click) ="setTitleHome()">Home</a>
<a (click) ="setTitleLogin()">Login</a>
<a (click) ="setTitleRegister()">Register</a>
</div>
<router-outlet></router-outlet>
app.component.scss
.content{
width: 80%;
min-height: 100%;
margin: auto;
background: grey;
border-bottom: 2px solid aqua;
}
a{
padding: 20px;
text-decoration: none;
size: 20px;
font-weight: bold;
cursor: pointer;
}
h1{
text-align: center;
color: yellow;
}
app.component.ts
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
title = 'SetTitleinAngular';
ngOnInit(): void {
throw new Error("Method not implemented.");
}
constructor(private serviceTitle: Title, private router:Router){
}
setTitleHome(){
this.serviceTitle.setTitle("Home");
this.router.navigateByUrl("/home");
}
setTitleLogin(){
this.serviceTitle.setTitle("Login" +" | " +this.title);
this.router.navigateByUrl("/login");
}
setTitleRegister(){
this.serviceTitle.setTitle("Register" +" | " +this.title);
this.router.navigateByUrl("/register");
}
}
home.component.html
<div class="content">
<h3>Hot girl beautyfull</h3>
<img src ="https://i.a4vn.com/2018/12/12/cung-ngam-hinh-anh-xinh-dep-cua-hot-girl-thai-lan-quyen-ru-va-go-55cf32.jpg" width="300px" height="300px"/>
<img src ="https://i.a4vn.com/2018/12/12/cung-ngam-hinh-anh-xinh-dep-cua-hot-girl-thai-lan-quyen-ru-va-go-55cf32.jpg" width="300px" height="300px"/>
<img src ="https://i.a4vn.com/2018/12/12/cung-ngam-hinh-anh-xinh-dep-cua-hot-girl-thai-lan-quyen-ru-va-go-55cf32.jpg" width="300px" height="300px"/>
<img src ="https://i.a4vn.com/2018/12/12/cung-ngam-hinh-anh-xinh-dep-cua-hot-girl-thai-lan-quyen-ru-va-go-55cf32.jpg" width="300px" height="300px"/>
</div>
.content{
width: 80%;
height: 100vh;
margin: auto;
background: grey;
}
h3{
text-align: center;
padding: 20px;
}
img{
margin: auto;
padding: 20px;
}
home.component.ts
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
login.component.html
<div class="content">
<h3>Login</h3>
<div class="login">
<span> User Name</span>
<input type="text" />
<span> Password</span>
<input type="password" />
<button>Login</button>
<button>Register</button>
</div>
</div>
login.component.scss
.content{
width: 80%;
height: 100vh;
margin: auto;
background: grey;
}
h3{
text-align: center;
padding: 20px;
}
img{
margin: auto;
padding: 20px;
}
.login{
width: 30%;
margin: auto;
}
input{
width: 100%;
padding: 10px;
}
button{
width: 30%;
float: left;
margin: 20px;
padding: 10px;
background: green
}
h3{
font-size: 40px;
}
login.component.ts
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
register.component.html
<div class="content">
<h3>Register</h3>
<div class="login">
<span> User Name</span>
<input type="text" />
<span> Password</span>
<input type="password" />
<span> Config Password</span>
<input type="password" />
<button>Register</button>
<button>Cancel</button>
</div>
</div>
register.component.scss
.content{
width: 80%;
height: 100vh;
margin: auto;
background: grey;
}
h3{
text-align: center;
padding: 20px;
}
img{
margin: auto;
padding: 20px;
}
.login{
width: 30%;
margin: auto;
}
input{
width: 100%;
padding: 10px;
}
button{
width: 30%;
float: left;
margin: 20px;
padding: 10px;
background: green
}
h3{
font-size: 40px;
}
register.component.ts
@Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.scss']
})
export class RegisterComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
This is code change title in angular
constructor(private serviceTitle: Title, private router:Router){
}
setTitleHome(){
this.serviceTitle.setTitle("Home");
this.router.navigateByUrl("/home");
}
setTitleLogin(){
this.serviceTitle.setTitle("Login" +" | " +this.title);
this.router.navigateByUrl("/login");
}
setTitleRegister(){
this.serviceTitle.setTitle("Register" +" | " +this.title);
this.router.navigateByUrl("/register");
}
No comments:
Post a Comment