Theme Integration of course listing page:
set the title of the page in src/app/courses/course-list/course-list.component.ts
@Component({
selector: 'app-course-list',
templateUrl: './course-list.component.html',
styleUrls: ['./course-list.component.css']
})
export class CourseListComponent implements OnInit {
title='Course list';
constructor() { }
ngOnInit() {
}
}
Edit the file src/app/courses/course-list/course-list.component.html
<section class="blog-list mtb-40">
<div class="container">
<h1>Courses</h1>
<div class="row">
<div class="col-md-4">
<div class="blog-box">
<img src="assets/images/img1.jpg" alt="blog1" />
<h3>Angular 7 Full Course</h3>
<p>by <span>Sahosoft Tutorials</span> </p>
<p>Angular 7 released in October 2018, just like it was scheduled. The new features of the framework are the updated form of Node 10..</p>
<a routerLink="/course/1" routerLinkActive="active" class="btn btn-danger">Read more...</a>
</div>
</div>
<div class="col-md-4">
<div class="blog-box">
<img src="assets/images/img2.jpg" alt="blog1" />
<h3>Python Full Course</h3>
<p>by <span>Sahosoft Tutorials</span> </p>
<p>Python is one of the high-level general programming languages, interpreted, easy to use,complete and powerful. It is an object..</p>
<a routerLink="/course/2" routerLinkActive="active" class="btn btn-danger">Read more...</a>
</div>
</div>
<div class="col-md-4">
<div class="blog-box">
<img src="assets/images/img3.jpg" alt="blog1" />
<h3>Angular Material course</h3>
<p>by <span>Sahosoft Tutorials</span> </p>
<p>Angular 7 released in October 2018, just like it was scheduled. The new features of the framework are the updated form of Node 10..</p>
<a href="detail.html" class="btn btn-danger">Read more...</a>
</div>
</div>
<div class="col-md-4">
<div class="blog-box">
<img src="assets/images/img4.jpg" alt="blog1" />
<h3>Entity Framework Course</h3>
<p>by <span>Sahosoft Tutorials</span> </p>
<p>Angular 7 released in October 2018, just like it was scheduled. The new features of the framework are the updated form of Node 10..</p>
<a href="detail.html" class="btn btn-danger">Read more...</a>
</div>
</div>
<div class="col-md-4">
<div class="blog-box">
<img src="assets/images/img5.jpg" alt="blog1" />
<h3>CSS Course</h3>
<p>by <span>Sahosoft Tutorials</span> </p>
<p>Angular 7 released in October 2018, just like it was scheduled. The new features of the framework are the updated form of Node 10..</p>
<a href="detail.html" class="btn btn-danger">Read more...</a>
</div>
</div>
<div class="col-md-4">
<div class="blog-box">
<img src="assets/images/img6.jpg" alt="blog1" />
<h3>TypeSript Course</h3>
<p>by <span>Sahosoft Tutorials</span> </p>
<p>Angular 7 released in October 2018, just like it was scheduled. The new features of the framework are the updated form of Node 10..</p>
<a href="detail.html" class="btn btn-danger">Read more...</a>
</div>
</div>
</div>
</div>
</section>
Theme integration of course detail page
Edit the file src/app/courses/course-detail/course-detail.component.html
Also keep two components course-recent and course-categories on this page for showing recent course post and categories.
Like below:
<section class="blog-detail mtb-40">
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="blog-left">
<h1>Angular 7 Full Course</h1>
<div class="posted-on">
<p>by <span>Sahosoft Tutorials</span> on <span>March 22, 2019</span></p>
</div>
<div class="detail-img">
<img src="assets/images/img1.jpg" alt="blog1" />
</div>
<div class="blog-desc">
<p>The Angular is the newest form of the AngularJS, developed by Google, which is an open-source front-end development platform used for building mobile and desktop web applications. Angular is rewritten by the same team that built AngularJS.</p>
<p>It is a JavaScript framework for building web applications and apps in JavaScript, HTML, and TypeScript, which is a superset of JavaScript. The Angular now comes with every latest feature you need to build a complex and sophisticated web or mobile application. It contains features like component, Directives, Forms, Pipes, HTTP Services, Dependency Injection and many more. </p>
<p>Angular is the next big deal. Being the successor of the massive successful AngularJS framework it’s bound to frame the future of frontend development in a similar way. The powerful features and capabilities of Angular permit you to build complex, customizable, modern, responsive and user-friendly web applications. It also enables you to create software quicker and with less effort.</p>
<p>As your application grows, structuring your code in a clean and maintainable and more importantly, testable way, becomes more complex. But your life becomes far easier using a framework like Angular.
Angular 7 is the latest version of the Angular framework and simply an update to Angular 2.
Angular is faster than AngularJS and offers a much more flexible and modular development approach. After studying this tutorial you become proficient and able to take full advantage of all those features and start developing incredible applications in a reasonable time.</p>
</div>
</div>
</div>
<div class="col-md-4">
<app-course-recent></app-course-recent>
<app-course-categories></app-course-categories>
</div>
</div>
</div>
</section>
Theme integration of recent course post
Edit the file src/app/courses/course-recent/course-recent.component.html
<div class="right-widget recent-post">
<h3>Recent Posts</h3>
<a href="#">
<div class="rb-box">
<div class="rb-box-img">
<img src="assets/images/img1.jpg" alt="blog1" />
</div>
<div class="rb-box-desc">
<h4>Angular 7 Features</h4>
<p>Posted On: March 10, 2019</p>
</div>
</div>
</a>
<a href="#">
<div class="rb-box">
<div class="rb-box-img">
<img src="assets/images/img2.jpg" alt="blog1" />
</div>
<div class="rb-box-desc">
<h4>Python Project Setup</h4>
<p>Posted On: March 10, 2019</p>
</div>
</div>
</a>
<a href="#">
<div class="rb-box">
<div class="rb-box-img">
<img src="assets/images/img3.jpg" alt="blog1" />
</div>
<div class="rb-box-desc">
<h4>Angular Material example</h4>
<p>Posted On: March 10, 2019</p>
</div>
</div>
</a>
<a href="#">
<div class="rb-box">
<div class="rb-box-img">
<img src="assets/images/img4.jpg" alt="blog1" />
</div>
<div class="rb-box-desc">
<h4>Entity Framework Features</h4>
<p>Posted On: March 10, 2019</p>
</div>
</div>
</a>
<a href="#">
<div class="rb-box">
<div class="rb-box-img">
<img src="assets/images/img5.jpg" alt="blog1" />
</div>
<div class="rb-box-desc">
<h4>CSS 3 Example</h4>
<p>Posted On: March 10, 2019</p>
</div>
</div>
</a>
</div>
Theme integration of categories listing
Edit the file src/app/courses/course-categories/course-categories.component.html
<div class="right-widget categories">
<h3>Courses</h3>
<ul>
<li><a href="#">Angular 7</a></li>
<li><a href="#">Python</a></li>
<li><a href="#">MVC 4</a></li>
<li><a href="#">Angular Material</a></li>
<li><a href="#">SQL Server</a></li>
<li><a href="#">Entity Framework</a></li>
<li><a href="#">ASP.Net</a></li>
<li><a href="#">CSS 3</a></li>
<li><a href="#">TypeScript</a></li>
<li><a href="#">Java</a></li>
</ul>
</div>
Theme integration of static pages
Edit the file src/app/staticpages/page/page.component.html
<section class="cmspage mtb-40">
<div class="container">
<h1>About Us</h1>
<div class="page-desc">
<p>This website provides tutorials of different programming languages and Computer subjects. The main purpose of this website is to provide quality learning content for students and professionals. we understand your attachment with the content, so committed for delivering you the best possible material.
Sahosoft Tutorials website is all about creativity and innovative work in the field of Technology.</p>
<p>We provide web development course videos, MCS important videos, technology videos, and articles.
You will get all the videos from my youtube channel and source code and you are free to use it and make changes.</p>
</div>
</div>
</section>
Theme integration of contact Us page
Edit the file src/app/staticpages/contact-us/contact-us.component.html
<section class="cmspage mtb-40">
<div class="container">
<div class="page-desc">
<div class="row justify-content-center">
<div class="col-md-8">
<h1>Contact Us</h1>
<form>
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Name">
</div>
<div class="form-group">
<input type="text" name="email" class="form-control" placeholder="E-Mail">
</div>
<div class="form-group">
<input type="text" name="phone" class="form-control" placeholder="Phone">
</div>
<div class="form-group">
<textarea name="message" rows="5" class="form-control" placeholder="Message"></textarea>
</div>
<div class="form-group">
<button class="btn btn-success">Send</button>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
Theme integration of 404 page:
Edit the component file src/app/page-not-found/page-not-found.component.ts
Import Rotuer and create a founction gotoHome() to navigate home page.
import { Component, OnInit } from '@angular/core';
import {Router} from '@angular/router';
@Component({
selector: 'app-page-not-found',
templateUrl: './page-not-found.component.html',
styleUrls: ['./page-not-found.component.css']
})
export class PageNotFoundComponent implements OnInit {
constructor(private router:Router) { }
ngOnInit() {
}
gotoHome() {
this.router.navigate(['/']);
}
}
Edit the component file src/app/page-not-found/page-not-found.component.html
Call gotoHome() on click button Go to Home
<section class="cmspage mtb-40">
<div class="container">
<div class="error-404">
<h1>404</h1>
<h2>There is nothing here!</h2>
<p>Sorry, the page you were looking for in this blog does not exist.</p>
<button (click)="gotoHome()" class="btn btn-danger">Go to Home</button>
</div>
</div>
</section>
