Angular 5 Routing with Bootstrap Navbar
Hi Learner am thankful to you, to reading this article. In this article you will be learning about Angular 5 Routing with Bootstrap Navbar Before diving into this article take look on previous article. From previous article you learned about how to configure the routing in Angular 5 with multiple components
In this article you will be learning about
In previous article you implemented Angular 5 Routing application with five components with names home, about user-list, user-details, and user. Have look on Angular 5 components if you don’t know how to create components in Angular.
All three components are displayed on web browser through web URL. But in this article you will be displaying component data on web browser with help of Bootstrap Navigation
What Is Routing?
Routing is the process of switching in-between multiple view based on selected path to display date on web browser.
If the user navigate to different view in your application but the application will be a SPA (Single Page Application), without page reloading or user don’t have leave experience
Sample markup of three component.html files is as showed below
<div class=”container-fluid nopadding nomargin margintop”>
<h2>Angular Routing Home Page </h2>
<p>Hi Learner am here because of Angualr Rouitng</p>
<div class=”container margintop nopadding nomargin”>
<h2>About Route Working </h2>
The user component will be displaying the list of user details . So you must create user array to store the list of user names with key, value pairs as shown below.
Then the user-list component.ts file will be look like as
Routes tell the router which view to display when a user clicks a link or pastes a URL into the browser address bar.
A typical Angular Router has two properties:
- path: a string that matches the URL in the browser address bar.
- component: the component that the router should create when navigating to this route.
Configure the routing in app.module like
The markup in user-list component.html page .
You used *ngFor to looping through user variable of the user-list component.ts
script file of user.component.ts File
Output of the Angular 5 Routing
When the user click on name of the user
Thanks for Reading this Article 🙂
Learn Angular 5 Step by Step
Angular 5 Flow-Chart ,The Entry point of any Angular js application is main.js form main.ts file the control will be moving to app.module.ts. How the control is moved form main.ts to app.module.ts bcz of the Angular CLI was import the app module and bootstrap that module.
Angular 5 Components like What is Component?, What is the use of the component?, How you can use these components in Angular Application.Components are basic building block of an angular js application ,each and every component must be belongs to @node module in order to access for another component in Application
Tow way Binding Data binding is a communication in between type script code of the component and templateURL of the component ,to render sample markup on web browser .if you want to render sample html of the component then you used string interpolation
Directive are will be giving instructions to DOM ,how to render text on web browser. With help of directives you can manipulate the DOM Elements. Components are one type of Directives