Skip to main content

Related Articles

How to generate component and define routings in Angular

 


Things we learned so far

How to set up environment

          How to create Angular project

 

Today we will understand how you can create component using Angular CLI and how you can define routing to each component.

You can run below command to generate the component using Angular CLI

CD <<folder where you want to have the component>> 

Run ng g c <<component name>>

   

ng g c <<component name>>

Angular CLI will create for files and also update the app.module.ts file by adding new entry to the import section.

Next we will create the component for home page.

ng g c home

Modules in Angular Project

Code in the app.module.ts file should be as below.


import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

 

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import { LandingComponent } from './modules/landing/landing.component';

import { HomeComponent } from './modules/home/home.component';

 

@NgModule({

  declarations: [

    AppComponent,

    LandingComponent,

    HomeComponent

  ],

  imports: [

    BrowserModule,

    AppRoutingModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }


    

    Next we can define routing in app.routing.module.ts file

    Update router array as below

    

const routesRoutes = [

    { path: ''component: LandingComponent }, 

    { path: 'landing'component: LandingComponent },             

    { path: 'home'component: HomeComponent }

];

If user type home in URL then it will load home page and if user type any other path or word landing it will load the landing page.

Let’s see new UIs of your application by running ng serve command.


Home page of Angular project

Landing page of Angular project


You can remove all the code in your app.component.html other than 

<router-outlet></router-outlet>

Router-outlet is used to load the component to browser which is corresponding to the defined routing path.

 

Good Luck! now you have created two new component and defined the routing for them. 

Comments

Popular posts from this blog

The Power of ChatGPT and Whisper Models

A Deep Dive into Natural Language Processing Natural Language Processing (NLP) has seen a significant boost in recent years due to advancements in artificial intelligence and machine learning. Two models that have shown remarkable success in NLP are ChatGPT and Whisper. In this article, we will delve into the power of these models and their applications in the field of NLP. ChatGPT is a transformer-based language model developed by OpenAI that uses unsupervised learning to predict the next word in a sentence based on the context of previous words. ChatGPT is a generative model that is trained on large datasets of text, such as books and articles, and can be fine-tuned for specific tasks, such as question-answering or dialogue generation. ChatGPT is known for its ability to produce human-like text, making it an ideal tool for applications such as chatbots, content creation, and language translation. Whisper, on the other hand, is a paraphrasing model developed by Google that is based on...

Getting Started With PrimeNG Styling in Angular App

  This chapter I am going to explain how you can do the styling to our flower store app. There are different kind of CSS frameworks you can use to style you app. Such as: 1.        Angular Material 2.        ngx-bootstrap 3.        NG bootstrap 4.        Prime NG   I am planning to use PrimeNG styling framework to style our flower store app. PrimeNG has more than 80 UI component and it is a collection of rich UI components for Angular. All widgets are open source and free to use under MIT License.   How to Install Prime NG 1.     Run   npm install primeng –save  inside your root folder.                    2.        Run npm install primeicons –save to install prime icons. 3.        Run npm ...

PrimeNG UI Components For Angular Application

Getting Started With PrimeNG Styling in Angular App  This chapter we are going to check how you can add PrimeNG card component to show available flowers in the stock. Before styling the app, I have added some images of flowers to our assets folder as below. In app.module.ts file you can import PrimeNG Card module as below. import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { LandingComponent } from './modules/landing/landing.component'; import { HomeComponent } from './modules/home/home.component'; import { CardModule } from 'primeng/card'; ; @NgModule({   declarations: [     AppComponent,     LandingComponent,     HomeComponent   ],   imports: [     BrowserModule,     AppRoutingModule,     CardModule,        ],   provider...