Angular - Components - Separation of Concerns - Creating Child Component Templates and Classes with Bootstrap #14
akash-coded
started this conversation in
Tasks
Replies: 9 comments
-
aside.component.tsimport { Component, OnInit } from '@angular/core';
interface list
{
value : string;
}
@Component({
selector: 'app-aside',
templateUrl: './aside.component.html',
styleUrls: ['./aside.component.css']
})
export class AsideComponent implements OnInit {
title: string = 'Related';
li : list[] = [{ value: 'Hello world'},{ value: 'Learning bootstrap'}, { value: 'Creating good looking pages'},{ value: 'Responsive design'}];
constructor() { }
ngOnInit(): void {
}
}aside.component.html<div class="container">
<h2 class="text-center">{{ title }}</h2>
<div class="row">
<div class="offset-4 col-4 offset-lg-2 col-lg-8">
<ul>
<li>
<a href="">{{ li[0].value }}</a>
</li>
<li>
<a href="">{{ li[1].value }}</a>
</li>
<li>
<a href="">{{ li[2].value }}</a>
</li>
<li>
<a href="">{{ li[3].value }}</a>
</li>
</ul>
</div>
</div>
</div>footer.component.tsimport { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-footer',
templateUrl: './footer.component.html',
styleUrls: ['./footer.component.css']
})
export class FooterComponent implements OnInit {
footText: string = 'Copyright 2050 by Akash Das. All rights reserved.';
constructor() { }
ngOnInit(): void {
}
}footer.component.html<footer class="container box bg-light mb-2">
<div class="row p-3">
<div class="col-12">© {{ footText }}</div>
</div>
</footer>header.component.tsimport { Component, OnInit } from '@angular/core';
interface list
{
value : string;
}
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
li : list[] = [{value: 'HOME'},{value: 'ARTICLE'},{value: 'CONTACT'}];
constructor() { }
ngOnInit(): void {
}
}child.component.html<header class="container">
<h1 class="page-header text-center">Header</h1>
<div class="row">
<nav
class="col-12 box navbar navbar-expand-lg navbar-fixed-top navbar-dark bg-info"
>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
>
<span class="navbar-toggler-icon"></span>
</button>
<form class="form-inline d-none d-sm-inline d-lg-none my-2 my-lg-0">
<input
type="search"
class="form-control mr-sm-2"
name="searchBar"
id="searchBar"
/>
<button class="btn btn-outline-light my-2 my-sm-0">Search</button>
</form>
<a class="navbar-brand" href="#0">
<img
src="../../assets/img/logo.png"
alt="navbar-brand"
width="30"
height="30"
/>
Blog Nation
</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link active">{{ li[0].value }}</a>
</li>
<li class="nav-item">
<a class="nav-link">{{ li[1].value }}</a>
</li>
<li class="nav-item">
<a class="nav-link">{{ li[2].value }}</a>
</li>
</ul>
<form class="form-inline d-sm-none d-lg-inline my-2 my-lg-0">
<input
type="search"
class="form-control mr-sm-2"
name="searchBar"
id="searchBar"
/>
<button class="btn btn-outline-light my-2 my-sm-0">Search</button>
</form>
</div>
</nav>
</div>
</header>
|
Beta Was this translation helpful? Give feedback.
0 replies
-
app.component.html<div class="bg-secondary">
<app-header></app-header>
<app-main></app-main>
<app-footer></app-footer>
</div>header.component.html<header class="container">
<h1 class="page-header text-center">Header</h1>
<div class="row">
<nav
class="col-12 box navbar navbar-expand-lg navbar-fixed-top navbar-dark bg-info"
>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
>
<span class="navbar-toggler-icon"></span>
</button>
<form class="form-inline d-none d-sm-inline d-lg-none my-2 my-lg-0">
<input
type="search"
class="form-control mr-sm-2"
name="searchBar"
id="searchBar"
/>
<button class="btn btn-outline-light my-2 my-sm-0">
{{ menuOptions[0] }}
</button>
</form>
<a class="navbar-brand" href="#0">
<img
src="../../assets/img/logo.png"
alt="navbar-brand"
width="30"
height="30"
/>
Blog Nation
</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link active">{{ menuOptions[1] }}</a>
</li>
<li class="nav-item">
<a class="nav-link">{{ menuOptions[2] }}</a>
</li>
<li class="nav-item">
<a class="nav-link">{{ menuOptions[3] }}</a>
</li>
</ul>
<form class="form-inline d-sm-none d-lg-inline my-2 my-lg-0">
<input
type="search"
class="form-control mr-sm-2"
name="searchBar"
id="searchBar"
/>
<button class="btn btn-outline-light my-2 my-sm-0">Search</button>
</form>
</div>
</nav>
</div>
</header>header.component.tsimport { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
menuOptions: string[]=["Search","HOME","ARTICLES","CONTACT"]
constructor() { }
ngOnInit(): void {
}
}footer.component.html<footer class="container box bg-light mb-2">
<div class="row p-3">
<div class="col-12">© {{ footerClause }}</div>
</div>
</footer>footer.component.tsimport { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-footer',
templateUrl: './footer.component.html',
styleUrls: ['./footer.component.css']
})
export class FooterComponent implements OnInit {
footerClause: string = " Copyright 2050 by Akash Das. All rights reserved."
constructor() { }
ngOnInit(): void {
}
}main.component.html<main class="container">
<div class="row">
<app-article class="col-lg-9 box bg-light"></app-article>
<app-aside class="col-lg-3 box bg-info"></app-aside>
</div>
</main>article.component.html<h2 class="text-center">{{ article.heading }}</h2>
{{ article.introduction }}
<section>
<h3>{{ article.subsections[0].heading }}</h3>
<p>
{{ article.subsections[0].body }}
</p>
</section>
<section>
<h3>{{ article.subsections[0].heading }}</h3>
<p>
{{ article.subsections[1].body }}
</p>
</section>article.component.tsimport { Component, OnInit } from '@angular/core';
interface Section {
heading: string;
body: string;
}
interface Article {
heading: string;
introduction: string;
subsections: Section[];
}
@Component({
selector: 'app-article',
templateUrl: './article.component.html',
styleUrls: ['./article.component.css'],
})
export class ArticleComponent implements OnInit {
article: Article = {
heading: 'Article heading',
introduction:
'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto officia illum molestiae dolore dolor quis enim distinctio velit nemo, error esse ad, unde, vitae possimus voluptatem sequi. Ex, earum quasi.',
subsections: [
{
heading: 'Subsection',
body: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi eaque est quia adipisci? Fuga odit, magni eveniet impedit ad vel quidem under perspiciatis iste pariatur iure nobis incidunt! Odio, cumque?',
},
{
heading: 'Another subsection',
body: 'Asperiores saepe error odio delectus omnis sapiente voluptate facilis quos a dolore amet deserunt voluptates numquam vero quibusdam labore dolores quod laborum cum praesentium, expedita voluptatem sed molestiae? Ducimus, nisi!',
},
],
};
constructor() {}
ngOnInit(): void {}
}aside.component.html<div class="container">
<h2 class="text-center">Related</h2>
<div class="row">
<div class="offset-4 col-4 offset-lg-2 col-lg-8">
<ul>
<li>
<a href="">{{ asideList[0] }}</a>
</li>
<li>
<a href="">{{ asideList[1] }}</a>
</li>
<li>
<a href="">{{ asideList[2] }}</a>
</li>
<li>
<a href="">{{ asideList[3] }}</a>
</li>
</ul>
</div>
</div>
</div>aside.component.tsimport { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-aside',
templateUrl: './aside.component.html',
styleUrls: ['./aside.component.css']
})
export class AsideComponent implements OnInit {
asideList: string[] =["Hello world","Learning bootstrap","Creating good looking pages","Responsive design"]
constructor() { }
ngOnInit(): void {
}
} |
Beta Was this translation helpful? Give feedback.
0 replies
-
APP.COMPONENT.HTML<div class="bg-secondary">
<app-header></app-header>
<app-main></app-main>
<app-footer></app-footer>
</div>HEADER.COMPONENT.HTML<header class="container">
<h1 class="page-header text-center">{{ header.heading }}</h1>
<div class="row">
<nav
class="col-12 box navbar navbar-expand-lg navbar-fixed-top navbar-dark bg-info"
>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
>
<span class="navbar-toggler-icon"></span>
</button>
<form class="form-inline d-none d-sm-inline d-lg-none my-2 my-lg-0">
<input
type="search"
class="form-control mr-sm-2"
name="searchBar"
id="searchBar"
/>
<button class="btn btn-outline-light my-2 my-sm-0">Search</button>
</form>
<a class="navbar-brand" href="#0">
<img
src="data:image/png;base64,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"
alt="navbar-brand"
width="30"
height="30"
/>
Blog Nation
</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link active">{{ header.subsections[0].points }}</a>
</li>
<li class="nav-item">
<a class="nav-link">{{ header.subsections[1].points }}</a>
</li>
<li class="nav-item">
<a class="nav-link">{{ header.subsections[2].points }}</a>
</li>
</ul>
<form class="form-inline d-sm-none d-lg-inline my-2 my-lg-0">
<input
type="search"
class="form-control mr-sm-2"
name="searchBar"
id="searchBar"
/>
<button class="btn btn-outline-light my-2 my-sm-0">Search</button>
</form>
</div>
</nav>
</div>
</header>HEADER.COMPONENT.TSimport { Component, OnInit } from '@angular/core';
interface Section{
points : string
}
interface Header {
heading: string;
subsections: Section[];
}
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
header: Header = {
heading: 'Header',
subsections: [
{
points: 'Home',
},
{
points: 'Article',
},
{
points: 'Contact',
}
],
};
constructor() { }
ngOnInit(): void {
}
}MAIN.COMPONENT.HTML<main class="container">
<div class="row">
<app-article class="col-lg-9 box bg-light"></app-article>
<app-aside class="col-lg-3 box bg-info"></app-aside>
</div>
</main>ARTICLE.COMPONENT.HTML<h2 class="text-center">{{ article.heading }}</h2>
{{ article.introduction }}
<section>
<h3>{{ article.subsections[0].heading }}</h3>
<p>
{{ article.subsections[0].body }}
</p>
</section>
<section>
<h3>{{ article.subsections[0].heading }}</h3>
<p>
{{ article.subsections[1].body }}
</p>
</section>ARTICLE.COMPONENT.TSimport { Component, OnInit } from '@angular/core';
interface Section {
heading: string;
body: string;
}
interface Article {
heading: string;
introduction: string;
subsections: Section[];
}
@Component({
selector: 'app-article',
templateUrl: './article.component.html',
styleUrls: ['./article.component.css'],
})
export class ArticleComponent implements OnInit {
article: Article = {
heading: 'Article heading',
introduction:
'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto officia illum molestiae dolore dolor quis enim distinctio velit nemo, error esse ad, unde, vitae possimus voluptatem sequi. Ex, earum quasi.',
subsections: [
{
heading: 'Subsection',
body: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi eaque est quia adipisci? Fuga odit, magni eveniet impedit ad vel quidem under perspiciatis iste pariatur iure nobis incidunt! Odio, cumque?',
},
{
heading: 'Another subsection',
body: 'Asperiores saepe error odio delectus omnis sapiente voluptate facilis quos a dolore amet deserunt voluptates numquam vero quibusdam labore dolores quod laborum cum praesentium, expedita voluptatem sed molestiae? Ducimus, nisi!',
},
],
};
constructor() {}
ngOnInit(): void {}
}ASIDE.COMPONENT.HTML<div class="container">
<h2 class="text-center">{{ aside.heading }}</h2>
<div class="row">
<div class="offset-4 col-4 offset-lg-2 col-lg-8">
<ul>
<li>
<a href="">{{ aside.subsections[0].points }}</a>
</li>
<li>
<a href="">{{ aside.subsections[1].points }}</a>
</li>
<li>
<a href="">{{ aside.subsections[2].points }}</a>
</li>
<li>
<a href="">{{ aside.subsections[3].points }}</a>
</li>
</ul>
</div>
</div>
</div>ASIDE.COMPONENT.TSimport { Component, OnInit } from '@angular/core';
interface Section
{
points : string
}
interface Aside {
heading: string;
subsections: Section[];
}
@Component({
selector: 'app-aside',
templateUrl: './aside.component.html',
styleUrls: ['./aside.component.css']
})
export class AsideComponent implements OnInit {
aside: Aside = {
heading: 'Related',
subsections: [
{
points: 'Hello world',
},
{
points: 'Learning bootstrap',
},
{
points: 'Creating good looking pages',
},
{
points: 'Responsive design',
},
],
};
constructor() { }
ngOnInit(): void {
}
}
|
Beta Was this translation helpful? Give feedback.
0 replies
-
footer.components.tsimport { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-footer',
templateUrl: './footer.component.html',
styleUrls: ['./footer.component.css']
})
export class FooterComponent implements OnInit {
content: string = "Copyright 2050 by Akash Das. All rights reserved.";
constructor() { }
ngOnInit(): void {
}
}footer html<footer class="container box bg-light mb-2">
<div class="row p-3">
<div class="col-12">
© {{content}}
</div>
</div>
</footer>header.component.tsimport { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
brandname: string = "Blog Nation";
inputbox: string = "Search";
lists: string[] = ["HOME", "ARTICLES", "CONTACT"]
constructor() { }
ngOnInit(): void {
}
}header html<header class="container">
<h1 class="page-header text-center">Header</h1>
<div class="row">
<nav class="col-12 box navbar navbar-expand-lg navbar-fixed-top navbar-dark bg-info">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<form class="form-inline d-none d-sm-inline d-lg-none my-2 my-lg-0">
<input type="search" class="form-control mr-sm-2" name="searchBar" id="searchBar" />
<button class="btn btn-outline-light my-2 my-sm-0">{{inputbox}}</button>
</form>
<a class="navbar-brand" href="#0">
<img src="../../assets/img/logo.png" alt="navbar-brand" width="30" height="30" />
{{brandname}}
</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link active">{{lists[0]}}</a>
</li>
<li class="nav-item">
<a class="nav-link">{{lists[1]}}</a>
</li>
<li class="nav-item">
<a class="nav-link">{{lists[2]}}</a>
</li>
</ul>
<form class="form-inline d-sm-none d-lg-inline my-2 my-lg-0">
<input type="search" class="form-control mr-sm-2" name="searchBar" id="searchBar" />
<button class="btn btn-outline-light my-2 my-sm-0">{{inputbox}}</button>
</form>
</div>
</nav>
</div>
</header>main html<main class="container">
<div class="row">
<app-article class="col-lg-9 box bg-light"></app-article>
<app-aside class="col-lg-3 box bg-info"></app-aside>
</div>
</main>article.component.tsimport { Component, OnInit } from '@angular/core';
interface Section {
heading: string;
body: string;
}
interface Article {
heading: string;
introduction: string;
subsections: Section[];
}
@Component({
selector: 'app-article',
templateUrl: './article.component.html',
styleUrls: ['./article.component.css'],
})
export class ArticleComponent implements OnInit {
article: Article = {
heading: 'Article heading',
introduction:
'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto officia illum molestiae dolore dolor quis enim distinctio velit nemo, error esse ad, unde, vitae possimus voluptatem sequi. Ex, earum quasi.',
subsections: [
{
heading: 'Subsection',
body: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi eaque est quia adipisci? Fuga odit, magni eveniet impedit ad vel quidem under perspiciatis iste pariatur iure nobis incidunt! Odio, cumque?',
},
{
heading: 'Another subsection',
body: 'Asperiores saepe error odio delectus omnis sapiente voluptate facilis quos a dolore amet deserunt voluptates numquam vero quibusdam labore dolores quod laborum cum praesentium, expedita voluptatem sed molestiae? Ducimus, nisi!',
},
],
};
constructor() { }
ngOnInit(): void { }
}article html<h2 class="text-center">{{ article.heading }}</h2>
{{ article.introduction }}
<section>
<h3>{{ article.subsections[0].heading }}</h3>
<p>
{{ article.subsections[0].body }}
</p>
</section>
<section>
<h3>{{ article.subsections[0].heading }}</h3>
<p>
{{ article.subsections[1].body }}
</p>
</section>aside.component.tsimport { Component, OnInit } from '@angular/core';
interface lists {
item: string;
}
@Component({
selector: 'app-aside',
templateUrl: './aside.component.html',
styleUrls: ['./aside.component.css']
})
export class AsideComponent implements OnInit {
heading: string = "Related";
list: string[] = ["Hello world", "Learning bootstrap", "Creating good looking pages", "Responsive designs"]
constructor() { }
ngOnInit(): void {
}
}aside html<div class="container">
<h2 class="text-center">{{heading}}</h2>
<div class="row">
<div class="offset-4 col-4 offset-lg-2 col-lg-8">
<ul>
<li><a href="">{{list[0]}}</a></li>
<li><a href="">{{list[1]}}</a></li>
<li><a href="">{{list[2]}}</a></li>
<li><a href="">{{list[3]}}</a></li>
</ul>
</div>
</div>
</div>app.html<div class="bg-secondary">
<app-header></app-header>
<app-main></app-main>
<app-footer></app-footer>
</div>
|
Beta Was this translation helpful? Give feedback.
0 replies
-
|
header.component.html <header class="container">
<h1 class="page-header text-center">Header</h1>
<div class="row">
<nav
class="col-12 box navbar navbar-expand-lg navbar-fixed-top navbar-dark bg-info"
>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
>
<span class="navbar-toggler-icon"></span>
</button>
<form class="form-inline d-none d-sm-inline d-lg-none my-2 my-lg-0">
<input
type="search"
class="form-control mr-sm-2"
name="searchBar"
id="searchBar"
/>
<button class="btn btn-outline-light my-2 my-sm-0">
{{ menuOptions[0] }}
</button>
</form>
<a class="navbar-brand" href="#0">
<img
src="../../assets/img/logo.png"
alt="navbar-brand"
width="30"
height="30"
/>
Blog Nation
</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link active">{{ menuOptions[1] }}</a>
</li>
<li class="nav-item">
<a class="nav-link">{{ menuOptions[2] }}</a>
</li>
<li class="nav-item">
<a class="nav-link">{{ menuOptions[3] }}</a>
</li>
</ul>
<form class="form-inline d-sm-none d-lg-inline my-2 my-lg-0">
<input
type="search"
class="form-control mr-sm-2"
name="searchBar"
id="searchBar"
/>
<button class="btn btn-outline-light my-2 my-sm-0">Search</button>
</form>
</div>
</nav>
</div>
</header>header.component.ts import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
menuOptions: string[]=["Search","HOME","ARTICLES","CONTACT"]
constructor() { }
ngOnInit(): void {
}
}main.component.html <main class="container">
<div class="row">
<app-article class="col-lg-9 box bg-light"></app-article>
<app-aside class="col-lg-3 box bg-info"></app-aside>
</div>
</main>article.component.html <h2 class="text-center">{{ article.heading }}</h2>
{{ article.introduction }}
<section>
<h3>{{ article.subsections[0].heading }}</h3>
<p>
{{ article.subsections[0].body }}
</p>
</section>
<section>
<h3>{{ article.subsections[0].heading }}</h3>
<p>
{{ article.subsections[1].body }}
</p>
</section>article.component.ts import { Component, OnInit } from '@angular/core';
interface Section {
heading: string;
body: string;
}
interface Article {
heading: string;
introduction: string;
subsections: Section[];
}
@Component({
selector: 'app-article',
templateUrl: './article.component.html',
styleUrls: ['./article.component.css'],
})
export class ArticleComponent implements OnInit {
article: Article = {
heading: 'Article heading',
introduction:
'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto officia illum molestiae dolore dolor quis enim distinctio velit nemo, error esse ad, unde, vitae possimus voluptatem sequi. Ex, earum quasi.',
subsections: [
{
heading: 'Subsection',
body: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi eaque est quia adipisci? Fuga odit, magni eveniet impedit ad vel quidem under perspiciatis iste pariatur iure nobis incidunt! Odio, cumque?',
},
{
heading: 'Another subsection',
body: 'Asperiores saepe error odio delectus omnis sapiente voluptate facilis quos a dolore amet deserunt voluptates numquam vero quibusdam labore dolores quod laborum cum praesentium, expedita voluptatem sed molestiae? Ducimus, nisi!',
},
],
};
constructor() {}
ngOnInit(): void {}
}aside.component.html <div class="container">
<h2 class="text-center">Related</h2>
<div class="row">
<div class="offset-4 col-4 offset-lg-2 col-lg-8">
<ul>
<li>
<a href="">{{ asideList[0] }}</a>
</li>
<li>
<a href="">{{ asideList[1] }}</a>
</li>
<li>
<a href="">{{ asideList[2] }}</a>
</li>
<li>
<a href="">{{ asideList[3] }}</a>
</li>
</ul>
</div>
</div>
</div>aside.component.ts import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-aside',
templateUrl: './aside.component.html',
styleUrls: ['./aside.component.css']
})
export class AsideComponent implements OnInit {
asideList: string[] =["Hello world","Learning bootstrap","Creating good looking pages","Responsive design"]
constructor() { }
ngOnInit(): void {
}
}footer.component.html <footer class="container box bg-light mb-2">
<div class="row p-3">
<div class="col-12">© {{ footerClause }}</div>
</div>
</footer>footer.component.ts import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-footer',
templateUrl: './footer.component.html',
styleUrls: ['./footer.component.css']
})
export class FooterComponent implements OnInit {
footerClause: string = " Copyright 2050 by Akash Das. All rights reserved."
constructor() { }
ngOnInit(): void {
}
}app.component.html <div class="bg-secondary">
<app-header></app-header>
<app-main></app-main>
<app-footer></app-footer>
</div> |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
header.component.html header.component.ts main.component.html main.component.ts article.component.html article.component.ts aside.component.html aside.component.ts app.component.html |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
header.component.html <header class="container">
<h1 class="page-header text-center">{{ header.heading }}</h1>
<div class="row">
<nav
class="col-12 box navbar navbar-expand-lg navbar-fixed-top navbar-dark bg-info"
>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
>
<span class="navbar-toggler-icon"></span>
</button>
<form class="form-inline d-none d-sm-inline d-lg-none my-2 my-lg-0">
<input
type="search"
class="form-control mr-sm-2"
name="searchBar"
id="searchBar"
/>
<button class="btn btn-outline-light my-2 my-sm-0">Search</button>
</form>
<a class="navbar-brand" href="#0">
<img
src="https://tse2.mm.bing.net/th/id/OIP.HIlPRjLZcRF4Sdi70t3K6gHaHa?pid=ImgDet&rs=1"
alt="navbar-brand"
width="30"
height="30"
/>
Publications
</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link active">{{ header.subsections[0].points }}</a>
</li>
<li class="nav-item">
<a class="nav-link">{{ header.subsections[1].points }}</a>
</li>
<li class="nav-item">
<a class="nav-link">{{ header.subsections[2].points }}</a>
</li>
</ul>
<form class="form-inline d-sm-none d-lg-inline my-2 my-lg-0">
<input
type="search"
class="form-control mr-sm-2"
name="searchBar"
id="searchBar"
/>
<button class="btn btn-outline-light my-2 my-sm-0">Search</button>
</form>
</div>
</nav>
</div>
</header>header.component.ts import { Component, OnInit } from '@angular/core';
interface Section{
points : string
}
interface Header {
heading: string;
subsections: Section[];
}
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
header: Header = {
heading: 'Header',
subsections: [
{
points: 'Home',
},
{
points: 'Article',
},
{
points: 'Contact',
}
],
};
constructor() { }
ngOnInit(): void {
}
}footer.component.ts import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-footer',
templateUrl: './footer.component.html',
styleUrls: ['./footer.component.css']
})
export class FooterComponent implements OnInit {
footText: string = 'Copyright 2050 by Akash Das. All rights reserved.';
constructor() { }
ngOnInit(): void {
}
}footer.component.html <footer class="container box bg-light mb-2">
<div class="row p-3">
<div class="col-12">© {{ footText }}</div>
</div>
</footer>main.component.ts import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-main',
templateUrl: './main.component.html',
styleUrls: ['./main.component.css']
})
export class MainComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}aside.component.html <div class="container">
<h2 class="text-center">{{ aside.heading }}</h2>
<div class="row">
<div class="offset-4 col-4 offset-lg-2 col-lg-8">
<ul>
<li>
<a href="">{{ aside.subsections[0].points }}</a>
</li>
<li>
<a href="">{{ aside.subsections[1].points }}</a>
</li>
<li>
<a href="">{{ aside.subsections[2].points }}</a>
</li>
<li>
<a href="">{{ aside.subsections[3].points }}</a>
</li>
</ul>
</div>
</div>
</div>aside.component.ts import { Component, OnInit } from '@angular/core';
interface Section
{
points : string
}
interface Aside {
heading: string;
subsections: Section[];
}
@Component({
selector: 'app-aside',
templateUrl: './aside.component.html',
styleUrls: ['./aside.component.css']
})
export class AsideComponent implements OnInit {
aside: Aside = {
heading: 'Related',
subsections: [
{
points: 'Hello world',
},
{
points: 'Learning bootstrap',
},
{
points: 'Creating good looking pages',
},
{
points: 'Responsive design',
},
],
};
constructor() { }
ngOnInit(): void {
}
}article.component.html <h2 class="text-center">{{ article.heading }}</h2>
{{ article.introduction }}
<section>
<h3>{{ article.subsections[0].heading }}</h3>
<p>
{{ article.subsections[0].body }}
</p>
</section>
<section>
<h3>{{ article.subsections[0].heading }}</h3>
<p>
{{ article.subsections[1].body }}
</p>
</section>article.component.ts import { Component, OnInit } from '@angular/core';
interface Section {
heading: string;
body: string;
}
interface Article {
heading: string;
introduction: string;
subsections: Section[];
}
@Component({
selector: 'app-article',
templateUrl: './article.component.html',
styleUrls: ['./article.component.css'],
})
export class ArticleComponent implements OnInit {
article: Article = {
heading: 'Article heading',
introduction:
'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto officia illum molestiae dolore dolor quis enim distinctio velit nemo, error esse ad, unde, vitae possimus voluptatem sequi. Ex, earum quasi.',
subsections: [
{
heading: 'Subsection',
body: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi eaque est quia adipisci? Fuga odit, magni eveniet impedit ad vel quidem under perspiciatis iste pariatur iure nobis incidunt! Odio, cumque?',
},
{
heading: 'Another subsection',
body: 'Asperiores saepe error odio delectus omnis sapiente voluptate facilis quos a dolore amet deserunt voluptates numquam vero quibusdam labore dolores quod laborum cum praesentium, expedita voluptatem sed molestiae? Ducimus, nisi!',
},
],
};
constructor() {}
ngOnInit(): void {}
}app.component.html <div class="bg-secondary">
<app-header></app-header>
<app-main></app-main>
<app-footer></app-footer>
</div> |
Beta Was this translation helpful? Give feedback.
0 replies
-
header.component.html<header>
<h1>Header</h1>
</header>
<main>
<nav
class="navbar navbar-expand-lg navbar-fixed-top navbar-dark mt-5"
style="background-color: green"
>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
>
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#0">
<img
src="../../assets/img/autodesk-autocad.png"
alt="navbar-brand"
width="30"
height="30"
/>
Article Blog
</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<form class="form-inline mr-auto my-2 my-lg-0 mr-2">
<input
type="search"
class="form-control mr-sm-2"
name="searchBar"
id="searchBar"
/>
<button class="btn btn-outline-light my-2 my-sm-0">Search</button>
</form>
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link active">
<strong>Home</strong>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<strong>Project</strong>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<strong>Our Team</strong>
</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a
href="#"
class="nav-link dropdown-toggle"
role="button"
data-toggle="dropdown"
>
<strong>Account</strong>
<!-- person icon SVG image -->
<img
src="../../assets/img/png-transparent-user-profile-computer-icons-login-user-avatars.png"
alt="navbar-brand"
width="30"
height="30"
/></a>
<div class="dropdown-menu dropdown-menu-right">
<a href="#" class="dropdown-item"> <strong>Profile</strong> </a
><a href="#" class="dropdown-item"><strong>Support</strong></a>
<a href="#" class="dropdown-item">
<div class="dropdown-divider"></div>
<strong>Logout</strong>
</a>
</div>
</li>
</ul>
</div>
</nav>
</main>main.component.html<main>
<div class="row my-2">
<app-article class="col-md-8" style="background-color: white"></app-article>
<app-aside
class="col-md-4 border border-dark"
style="background-color: green"
></app-aside>
</div>
</main>article.component.html<h2 class="text-center">{{ article.heading }}</h2>
{{ article.introduction }}
<section>
<h3>{{ article.subsections[0].heading }}</h3>
<p>
{{ article.subsections[0].body }}
</p>
</section>
<section>
<h3>{{ article.subsections[0].heading }}</h3>
<p>
{{ article.subsections[1].body }}
</p>
</section>article.component.tsimport { Component, OnInit } from '@angular/core';
interface Section {
heading: string;
body: string;
}
interface Article {
heading: string;
introduction: string;
subsections: Section[];
}
@Component({
selector: 'app-article',
templateUrl: './article.component.html',
styleUrls: ['./article.component.css']
})
export class ArticleComponent implements OnInit {
article: Article = {
heading: 'Article heading',
introduction:
'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto officia illum molestiae dolore dolor quis enim distinctio velit nemo, error esse ad, unde, vitae possimus voluptatem sequi. Ex, earum quasi.',
subsections: [
{
heading: 'Subsection',
body: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi eaque est quia adipisci? Fuga odit, magni eveniet impedit ad vel quidem under perspiciatis iste pariatur iure nobis incidunt! Odio, cumque?',
},
{
heading: 'Another subsection',
body: 'Asperiores saepe error odio delectus omnis sapiente voluptate facilis quos a dolore amet deserunt voluptates numquam vero quibusdam labore dolores quod laborum cum praesentium, expedita voluptatem sed molestiae? Ducimus, nisi!',
},
],
};
constructor() { }
ngOnInit(): void {
}
}aside.component.html<div>
<h1>Related</h1>
<ul class="list-unstyled text">
<li>
<a href="https://www.google.com">Oh I do like to be beside the seaside</a>
</li>
<li>
<a href="https://www.google.com">Oh I do like to be beside the sea</a>
</li>
<li>
<a href="https://www.google.com">Although in the North of England</a>
</li>
<li>
<a href="https://www.google.com">It never stops raining</a>
</li>
<li><a href="https://www.google.com">Oh wel...</a></li>
</ul>
</div>footer.component.html<main>
<div class="row my-2">
<footer class="col-md-12">
<i> © Copyright 2022 All rights concerned</i>
</footer>
</div>
</main>screentshot
|
Beta Was this translation helpful? Give feedback.
0 replies
-
footer.component.html<div class="col-12 border border-dark border-10 bg-primary mx-2">
<footer>
@Copyright 2050 by nobody. All rights reserved.
</footer>
</div>header.componnent.html<nav class="navbar navbar-expand-lg navbar-fixed-top navbar-dark bg-primary">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<form class="form-inline mr-auto my-2 my-lg-0 mr-2">
<input type="search" class="form-control mr-sm-2" name="searchBar" id="searchBar" />
<button class="btn btn-outline-light my-2 my-sm-0">Search</button>
</form>
<a class="navbar-brand" href="#0">
Kitchen Story
</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link active">
<strong>Home</strong>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<strong>Products</strong>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<strong>About</strong>
</a>
</li>
</ul>
</div>
<button class="navbar-toggler dropdown-toggle" type="button" data-toggle="collapse" data-target="#accountDropdown">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person"
viewBox="0 0 16 16">
<path
d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z" />
</svg>
</button>
<div class="collapse navbar-collapse" id="accountDropdown">
<ul class="navbar-nav">
<li class="nav-item"><a href="" class="nav-link"><strong>Profile</strong></a></li>
<li class="nav-item"><a href="" class="nav-link"><strong>Support</strong></a></li>
<li class="nav-item"><a href="" class="nav-link"><strong>Logout</strong></a></li>
</ul>
</div>
</nav>main.component.html<app-left-side-bar></app-left-side-bar>
<div class="row mb-2 mt-2 mx-2">
<div class="container col-12 col-md-2 col-lg-1 border border-dark" style="background-color: rgb(210, 51, 146) ">
<aside>
<ul class="list-unstyled">
<li class="list-item">Sports</li>
<li class="list-item">Football</li>
<li class="list-item">Hockey</li>
<li class="list-item">Badmaniton</li>
<li class="list-item">Tennis</li>
</ul>
</aside>
</div>
<!-- main content -->
<div class=" container col-12 col-md-10 col-lg-9 border border-dark border-10"
style="background-color: rgb(246, 236, 242) ">
<main>
<article>
<section>
<h2>
Article Heading
</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, pariatur!
Praesentium
voluptatem rerum cumque optio eligendi debitis, iure nam nihil dignissimos, quibusdam
est
aliquam
assumenda odio officia natus architecto molestiae!
</p>
</section>
<section>
<h3>Subsection</h3>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos minus itaque quasi,
nesciunt
sapiente
magnam aliquid amet, consequatur obcaecati quo ipsum? Provident quisquam voluptates
debitis
nobis
repudiandae voluptatum sint assumenda!
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos minus itaque quasi,
nesciunt
sapiente
magnam aliquid
amet, consequatur obcaecati quo ipsum? Provident quisquam voluptates debitis nobis
repudiandae
voluptatum sint
assumenda!
</p>
</section>
<section>
<h3>Another Subsection</h3>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos minus itaque quasi,
nesciunt
sapiente
magnam aliquid
amet, consequatur obcaecati quo ipsum? Provident quisquam voluptates debitis nobis
repudiandae
voluptatum sint
assumenda!
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos minus itaque quasi,
nesciunt
sapiente
magnam aliquid
amet, consequatur obcaecati quo ipsum? Provident quisquam voluptates debitis nobis
repudiandae
voluptatum sint
assumenda!
</p>
</section>
</article>
</main>
</div>
</div>
<app-right-side-bar></app-right-side-bar>leftSide.component.html<div class="container col-12 col-md-2 col-lg-1 border border-dark" style="background-color: rgb(210, 51, 146) ">
<aside>
<ul class="list-unstyled">
<li class="list-item">Sports</li>
<li class="list-item">Football</li>
<li class="list-item">Hockey</li>
<li class="list-item">Badmaniton</li>
<li class="list-item">Tennis</li>
</ul>
</aside>
</div>rightSide.component.html<!-- right sidebar -->
<aside name="rightsidebar" class=" container col-12 col-md-12 col-lg-2 border border-dark border-10"
style="background-color: rgb(199, 60, 138)">
<ul>
<li class=" sidebar-heading">Related</li>
<li><a href="www.india.com">India</a></li>
<li><a href="www.France.com">France</a></li>
<li><a href="www.Germany.com">Germany</a></li>
<li><a href="www.Finland.com">Finland</a></li>
</ul>
</aside> |
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.
-
Clone the Angular repository. In the repo, a demo project named
[bootstrap-manual-app](https://github.com/akash-coded/angular/tree/main/angular-apps/bootstrap-manual-app)is present.Currently, in all the components apart from the
articlecomponent, the design and the data are present in the component template (HTML) files.You need to follow the separation of design and data in the
[article](https://github.com/akash-coded/angular/tree/main/angular-apps/bootstrap-manual-app/src/app/main/article)component and similarly modify the remaining components with appropriate logic in the component classes, and by using one-way data binding (interpolation) in the component templates.Beta Was this translation helpful? Give feedback.
All reactions