DEV Community

Ahmed Abdelsalam
Ahmed Abdelsalam

Posted on • Originally published at Medium on

2 1

Building Angular 6 Application

angular 6 series

This is the second part in an n-part series about the JavaScript framework, Angular 6.

In this part, we'll go over build new Angular 6 Applicatin.

This is not intended to be a complete guide, but rather an overview of the basics to get you up and running so you can get to know using Angular CLI and how to build your Angular 6application using it.

Article Series

  1. Angular 6 Article Series
  2. Building Angular 6 Application ( You’re here )
  3. Using Angular Material with Angular 6
  4. Deploy Angular 6 Application to Netlify
  5. Creating PWA with Angular 6 ( Soon )
  6. Dynamic themes in Angular 6 Material ( Soon )
  7. Angular 6 with GSAP ( Soon )
  8. Angular 6 with Firebase ( Soon )

Upgrading Angular-CLI

I assume that you have nodejs and npm installed. If not you have to install them first. Just Google it.

First we need to upgrade our CLI or install it for the first time. The next command will install it or upgrade your current version.

npm i -g @angular/cli
Enter fullscreen mode Exit fullscreen mode

Creating new Angular App

Now We want to use CLI to create new Angular 6 Application. Change your directory where you want to create the new app, then run

ng new angular6-series --routing --style=scss --skip-tests
Enter fullscreen mode Exit fullscreen mode

Where angular6-series is our application's name. But we have some arguments here.

Let's Explain each argument of our command

  • --routing: It builds our routes so I won't have to build them myself
  • --style=scss: It changes our styling extension from css to scss as I prefer sass.
  • --skip-tests: to skip creating tests files. But You may need them in this case you have to remove this argument.

But If you want to build your application normally without all these options, just run:

ng new angular6-series
Enter fullscreen mode Exit fullscreen mode

After creating our new app. Move the app directory and run the server.

cd angular6-series
ng serve --open
Enter fullscreen mode Exit fullscreen mode

ng serve will run the server of our app and the argument --open will open it in the default browser.

Now you should see this in your browser

Creating Components

Let’s create new component named home and make it our home page with some content.

ng g c home
Enter fullscreen mode Exit fullscreen mode

This will create the component files. But you’ll see no change in your app. Let’s modify our src/app/app.component.html

Remove all the code and leave the last tag. It should look like

\<router-outlet\>\</router-outlet\>
Enter fullscreen mode Exit fullscreen mode

Now open /src/app/app-routing.module.ts

I want to add the new component as the home page.

We need to import the HomeComponent and add the route to routes array.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
 {
 path: "",
 component: HomeComponent
 },
];

@NgModule({
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
})
export class AppRoutingModule { }
Enter fullscreen mode Exit fullscreen mode

Now you should see your home component content in your home page.

Let’s edit our HomeComponent open /src/app/home/home.component.html

\<h1\>
 Welcome to our Angular 6 Application
\</h1\>
\<p\>
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda repudiandae repellat perferendis corrupti, harum provident
 ipsam illo laudantium magni deleniti corporis modi error aperiam iure molestiae eligendi quo voluptatem minus?
\</p\>
Enter fullscreen mode Exit fullscreen mode

Let’s create another component named posts

ng g c posts
Enter fullscreen mode Exit fullscreen mode

First we need to add new route for our posts component

open /src/app/app-routing.module.ts and do like we did to the home component

our file should look like

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { PostsComponent } from './posts/posts.component';

const routes: Routes = [
 {
 path: "",
 component: HomeComponent
 },
 {
 path: "posts",
 component: PostsComponent
 },
];

@NgModule({
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
})
export class AppRoutingModule { }
Enter fullscreen mode Exit fullscreen mode

Now open /src/app/posts/posts.component.html

and add some html

\<div class="post"\>
 \<h1\>Post title here\</h1\>
 \<p\>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia minima soluta harum fugit neque accusamus non fuga blanditiis quam enim nemo, quia dolores iure explicabo officia, cumque expedita quis sint.\</p\>
\</div\>
\<div class="post"\>
 \<h1\>Post title here\</h1\>
 \<p\>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia minima soluta harum fugit neque accusamus non fuga blanditiis quam enim nemo, quia dolores iure explicabo officia, cumque expedita quis sint.\</p\>
 \</div\>
Enter fullscreen mode Exit fullscreen mode

You can see our new component in the browser by visiting: http://localhost:4200/posts

That’s all for now.

Next: Using Angular Material with Angular 6

If you liked this article, hit that clap button below 👏. check out other articles I’ve written here. And If you find this story useful. As I don’t use Medium Partner Program. Consider a donation through PayPal, or ‘Buy Me a Coffee’ :)

Buy Ahmed Abdelsalam a Coffee. ko-fi.com/geeksamu

If you have any question comment it below or You can find me on Twitter @geeksamu

Ahmed ⚯͛ (@geeksamu) | Twitter

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay