ng new {application_name}  or ng new test112

I create an application for you on your specified path and also install the required packages so that your application will work perfectly.
I will take a few time so, wait with patience. Once your application created then type below command so that your application will open in the browser.

ng serve --open

Above command will compile your typescript and convert in js then compiler compiled thing serve to the browser. There is –open stand for open browser otherwise. The browser will need to open itself. Now created application working fine.

Addition of new module in angular application

Before starting anything few more module I need to install jquery, bootstrap which helps to create awsome UI Design.

npm install bootstrap@3.3.7 jquery --save

After successful installation, we need to add a path in the angular.json file like below which is exist on your application root.

"styles": [
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
            ],
            "scripts": [
              "./node_modules/jquery/dist/jquery.js",
              "./node_modules/bootstrap/dist/js/bootstrap.js"
            ]

There is app.componet.ts already found in the app folder. Now we need to create three pages so that I show perfect routing navigation.
So I will type below commands.

ng generate component home
ng generate component about
ng generate component contact

Above commands will create three pages for your application. Now one file needs to create app.router.ts which is responsible to complete routing.  In this file, I have to import three ( ModuleWithProviders, Routes, RouterModule)modules which is below.

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

I also need to define create page component like below. So that I can include routes variable.

import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';

Addition of Routing file

Now I have define a routes array. So that we can store all routes in this variable like below.

export const routes: Routes =[
{path:'home', component: HomeComponent},
{path:'about', component: AboutComponent},
{path:'contact', component: ContactComponent},
];

export const routing : ModuleWithProviders = RouterModule.forRoot(routes);

Now app.router.ts file is ready finally add to app.module.ts & import module routing using below code.

import { routing } from './app.router';
imports: [
    BrowserModule,
    FormsModule,
    routing]

Now finally add the navigation to the app.component.html. So the code will look like below.

routerLink=’home’ will generate the link for the home component & “routerLinkActive” will add the active class on the active route.

One more thing needs to add the <router-outlet></router-outlet> so that all component will show their data in it.

Finally, you can view the output.

Above code works in below video

Demo code

The post angular 6 tutorial for routing and navigation appeared first on Postnidea.

In current web development mobile friendly app development very popular. Everyone want same application work on the desktop as well as the mobile. So that he can save the cost of development. So Angular development more prominent because of same application work on the desktop as well mobile with a responsive feature. Bootstrap also help  the developer in the design section. So that the individual developer can complete their project. With this Bootstrap also provide an inbuilt function like pagination,filter, modal pop up, auto suggests etc.

Now days so much requirements raise of the e-commerce application development. In e-commerce application development important things are product,cart,order & categories. Especially when you have 1000 of category then how to manage it. If you load all category at the same time then the speed of the application become slow which shows a bad impact on the customer or if you show less category then its show bad impact on the customer.

But angular have a great feature of template binding with the two-way feature. With the help of that, we can bind HTML with the database. So there is a need to service that provides a data in JSON format. For providing fast JSON data I used SLIM API services.  So When a user clicks on the menu then user Hit services that provide the JSON data that data bind with HTML & render them. So on first loading only load parent category when user click on the category then extract their child same scenario you can manage thousands of category.

Demo code

The post angularjs tree category menu appeared first on Postnidea.