Angular - One-way Binding - Interpolation & Event Binding - Changing partial page content on (click) event #16
akash-coded
started this conversation in
Tasks
Replies: 3 comments
-
|
.html file <!DOCTYPE html>
<html>
<head>
<title>Article Web Page</title>
</head>
<body>
<h1 class="text-center">Header</h1>
<div class="container">
<div class="grid-container">
<div class="item1">
<nav class="header">
<ul>
<li><button class="btn" (click)="openHome()">Home</button></li>
<li>
<button class="btn" (click)="openArticle()">Articles</button>
</li>
<li>
<button class="btn" (click)="openContact()">Contact</button>
</li>
<li>
<input
type="search"
name="search"
id="search"
placeholder="Search query"
/>
</li>
<li><input type="button" name="go" id="go" value="GO!" /></li>
</ul>
</nav>
</div>
<!--Home-->
<div class="item2">
<div class="" id="himalayas" *ngIf="showHome">
<h1 class="text-center">The Himalayas</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet
repellendus minima voluptatibus magnam optio sapiente veritatis
modi sit porro quasi, ratione, voluptates eaque libero rem
accusamus ipsa eum perferendis ipsam. Lorem ipsum dolor sit amet
consectetur adipisicing elit. Repudiandae beatae a ratione quod
veritatis! Nisi molestias delectus consequatur architecto quam?
Sit voluptas nemo voluptates provident laborum veritatis numquam
vel quaerat.
</p>
<h2>Himalayas-1</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet
repellendus minima voluptatibus magnam optio sapiente veritatis
modi sit porro quasi, ratione, voluptates eaque libero rem
accusamus ipsa eum perferendis ipsam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam
praesentium ad laborum, non quibusdam consectetur reiciendis
voluptatum debitis veritatis, accusamus recusandae ipsum, quam
tempora ab iusto ratione nostrum consequatur omnis?
</p>
<h2>Himalayas-2</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet
repellendus minima voluptatibus magnam optio sapiente veritatis
modi sit porro quasi, ratione, voluptates eaque libero rem
accusamus ipsa eum perferendis ipsam.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet
repellendus minima voluptatibus magnam optio sapiente veritatis
modi sit porro quasi, ratione, voluptates eaque libero rem
accusamus ipsa eum perferendis ipsam.
</p>
</div>
<!--Articles-->
<div class="" id="river" *ngIf="showArticles">
<h1 class="text-center">River & Sea</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet
repellendus minima voluptatibus magnam optio sapiente veritatis
modi sit porro quasi, ratione, voluptates eaque libero rem
accusamus ipsa eum perferendis ipsam. Lorem ipsum dolor sit amet
consectetur adipisicing elit. Repudiandae beatae a ratione quod
veritatis! Nisi molestias delectus consequatur architecto quam?
Sit voluptas nemo voluptates provident laborum veritatis numquam
vel quaerat.
</p>
<h2>River</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet
repellendus minima voluptatibus magnam optio sapiente veritatis
modi sit porro quasi, ratione, voluptates eaque libero rem
accusamus ipsa eum perferendis ipsam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam
praesentium ad laborum, non quibusdam consectetur reiciendis
voluptatum debitis veritatis, accusamus recusandae ipsum, quam
tempora ab iusto ratione nostrum consequatur omnis?
</p>
<h2>Sea</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet
repellendus minima voluptatibus magnam optio sapiente veritatis
modi sit porro quasi, ratione, voluptates eaque libero rem
accusamus ipsa eum perferendis ipsam.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet
repellendus minima voluptatibus magnam optio sapiente veritatis
modi sit porro quasi, ratione, voluptates eaque libero rem
accusamus ipsa eum perferendis ipsam.
</p>
</div>
<!--Contact-->
<div class="" id="contact" *ngIf="showContact">
<h1 class="text-center">Contact Us</h1>
<pre>
Hey there, thank you for visiting our website. We looking forward
to connecting with you.
Please give us up to 72 hours torespond before resending the email.
Please note that we DO NOTaccept guest posts. If you send us an
inquiry with that, we will simply mark your email as spam.
Thanks for your understanding, andonce again thanks for checking out
our site.
We look forward to hearing from you!
</pre>
<form class="form-group">
<div>
<label for="name"><b>Name*:</b></label>
<input type="text" class="form-control" />
</div>
<br />
<div>
<label for="name"><b>Email*:</b></label>
<input type="text" class="form-control" />
</div>
<br />
<div>
<label for="name"><b>Message*:</b></label>
<textarea type="text" class="form-control"></textarea>
</div>
<br />
<div>
<!-- <label for="name"><b>Email*:</b></label> -->
<input type="button" value="Submit" />
</div>
</form>
</div>
</div>
<div class="item3">
<!--sidebar-1-->
<div class="" *ngIf="showHomeSideBar">
<aside>
<h1>Related to Himalayas</h1>
<ul>
<li><a href="#">Oh I do like to be beside the seaside</a></li>
<li><a href="#">Oh I do like to be beside the sea</a></li>
<li><a href="#">Although in the north of England</a></li>
<li><a href="#">I never stops raining</a></li>
<li><a href="#">oh well....</a></li>
</ul>
</aside>
</div>
<!--sidebar-2-->
<div class="" *ngIf="showArticlesSideBar">
<aside>
<h1>Related to Rivers&Sea</h1>
<ul>
<li><a href="#">Oh I do like to be beside the seaside</a></li>
<li><a href="#">Oh I do like to be beside the sea</a></li>
<li><a href="#">Although in the north of England</a></li>
<li><a href="#">I never stops raining</a></li>
<li><a href="#">oh well....</a></li>
</ul>
</aside>
</div>
<!--sidebar-3-->
<div class="" *ngIf="showContactSideBar">
<aside>
<h1>Related to Contacts</h1>
<ul>
<li><a href="#">Oh I do like to be beside the seaside</a></li>
<li><a href="#">Oh I do like to be beside the sea</a></li>
<li><a href="#">Although in the north of England</a></li>
<li><a href="#">I never stops raining</a></li>
<li><a href="#">oh well....</a></li>
</ul>
</aside>
</div>
</div>
<div class="item4">
<footer>
<p class="text-center">
@copyright 2050 by nobody. All rigths reserved
</p>
</footer>
</div>
</div>
</div>
</body>
</html>.ts file import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-changing-partial-page-content-on-click-event',
templateUrl: './changing-partial-page-content-on-click-event.component.html',
styleUrls: ['./changing-partial-page-content-on-click-event.component.css']
})
export class ChangingPartialPageContentOnClickEventComponent implements OnInit {
public showHome:boolean = true;
public showArticles:boolean = false;
public showContact:boolean = false;
public showHomeSideBar:boolean = true;
public showArticlesSideBar:boolean = false;
public showContactSideBar:boolean = false;
openArticle(){
this.showHome = false;
this.showArticles = true;
this.showHomeSideBar = false;
this.showArticlesSideBar = true;
this.showContact=false;
this.showContactSideBar=false;
}
openHome(){
this.showHome = true;
this.showArticles = false;
this.showHomeSideBar = true;
this.showArticlesSideBar = false;
this.showContact=false;
this.showContactSideBar=false;
}
openContact(){
this.showContact=true;
this.showContactSideBar=true;
this.showHome = false;
this.showArticles = false;
this.showHomeSideBar = false;
this.showArticlesSideBar = false;
}
constructor() { }
ngOnInit(): void {
}
}.css file body {
background-color: gray;
}
a {
color: black;
/* text-decoration: inherit; */
}
.header > ul > li {
display: inline;
padding: 30px;
font-size: 20px;
}
.btn:hover {
background: #eee;
}
.btn {
font-size: 20px;
}
#search {
margin-left: 200px;
margin-top: 10px;
}
#go {
background-color: black;
color: white;
}
.item1 {
grid-area: header;
padding: 10px;
background-color: rgb(15, 165, 176);
}
.item2 {
grid-area: main;
padding: 10px;
background-color: white;
}
.item3 {
grid-area: sidebar;
padding: 10px;
background-color: rgb(15, 165, 176);
}
.item4 {
grid-area: footer;
padding: 10px;
background-color: white;
}
.grid-container {
display: grid;
grid-template-areas:
"header header header header"
"main main main sidebar"
"main main main sidebar"
"footer footer footer footer";
grid-gap: 10px;
padding: 10px;
}
|
Beta Was this translation helpful? Give feedback.
0 replies
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"
/>
<!-- <link rel="stylesheet" href="/header.css" /> -->
</head>
<body>
<div class="container my-2 header">
<div class="row">
<div>
<button><a [routerLink]="'home'">HOME</a></button>
<button><a [routerLink]="'artical'">ARTICAL</a></button>
<button><a [routerLink]="'news'">NEWS</a></button>
<button><a [routerLink]="'contact'">CONTACT</a></button>
<input type="text" placeholder="Search " />
<button>!GO</button>
</div>
</div>
</div>
<router-outlet></router-outlet>
</body>
</html>
``` CSS
body{
background-color: #444;
}
.header{
border: solid 1px black;
background-color: #f542d4;
padding: 10px;
color: black;
}
.main{
background-color:white;
padding: 10px;
text-align: left;
}
.sidebar{
background-color:#f542d4;
}
.footer{
background-color: white;
border: dashed 1px;
}
.headingtag{
padding-left: 900px;
}
``` routing module
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ArticalComponent } from './artical/artical.component';
import { ContactComponent } from './contact/contact.component';
import { HomeComponent } from './home/home.component';
import { NewsComponent } from './news/news.component';
const routes: Routes = [
{path:'home',component:HomeComponent},
{path:'artical',component:ArticalComponent},
{path:'news',component:NewsComponent},
{path:'contact',component:ContactComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { } |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
You are the given following website:
You are currently on the "Home" page.
Define functions in the component class(es) which will change the content of the main section of the page depending on which navigation link is clicked. The header and the footer should remain the same.
The functions will be called via "Event Binding" from the template.
Beta Was this translation helpful? Give feedback.
All reactions