Greetings!
Angular has many things to learn though we can skip those and directly create simple project. It will be harder to study all the features first. So here, i'm going to directly create a simple starter project.
This is the end result of this tutorial.
This will create a basic app structure.
With zero code, we have a running template. That's some power.
Below command will add angular material into our project and update neccessary files.
We want to use material design component in our project. To add material components in a single place let's create a separate module named material and update it with neccessary materaial modules.
Now, we need to update app.module.ts to import our module.
Update angular.json file's style section to include bootstrap grid.
Angular has many things to learn though we can skip those and directly create simple project. It will be harder to study all the features first. So here, i'm going to directly create a simple starter project.
This is the end result of this tutorial.
Install Angular CLI
npm install -g @angular/cli
ng version
Create a project
ng new angular-store --routing --style=scss
cd angular-store
npm install
This will create a basic app structure.
Run the project
ng serve --open
# short form
ng s -o
With zero code, we have a running template. That's some power.
Angular Material
Let's add material UI design into our project. For more information visit https://material.angular.io/Below command will add angular material into our project and update neccessary files.
ng add @angular/material
We want to use material design component in our project. To add material components in a single place let's create a separate module named material and update it with neccessary materaial modules.
ng generate module material --flat
Now, we need to update app.module.ts to import our module.
import { MaterialModule } from './material.module';
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
MaterialModule
]
Making responsive UI
I'm going to use bootstrap css grid to create resposive user interface.npm install --save bootstrap
Update angular.json file's style section to include bootstrap grid.
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"./node_modules/bootstrap/dist/css/bootstrap-grid.css",
"src/styles.scss"
]
Create an app component
ng generate component home --module=app --spec=false
# short form
ng g c home --module=app --spec=false
ng g c about --module=app --spec=false
Adding a menu
Update app.component.html with below code. You can visit https://material.angular.io/components/toolbar/overview for more information.<mat-toolbar color="primary">
<span>Angular Store</span>
<span class="spacer"></span>
<button mat-button>Home</button>
<button mat-button>About</button>
</mat-toolbar>
<router-outlet></router-outlet>
We need to import related modules in our material module.
import { MatButtonModule } from '@angular/material/button';
import { MatToolbarModule } from '@angular/material/toolbar';
Adding routes
When we create the project with --routing option, app-routing.module.ts is already created. What we need to do is specify our routes.
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
const routes: Routes = [
{
path: '',
component: HomeComponent
},
{
path: 'about',
component: AboutComponent
}
];
Then, we need to update our menu bar to our routes.
<button mat-button [routerLink]="['/']">Home</button>
<button mat-button [routerLink]="['/about']">About</button>
Showing products
This will be just hard coded for loop. We are going to use material card to show our content. https://material.angular.io/components/card/overview
Update home.component.js with below variable.
items = new Array(10);
Update home.component.html with below content.
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 mt-10" *ngFor="let item of items">
<mat-card>
<img mat-card-image src="/assets/icon.png" alt="" />
<mat-card-header>
<mat-card-title>Lorem, ipsum dolor.</mat-card-title>
</mat-card-header>
<mat-card-content>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid, sapiente?</p>
</mat-card-content>
<mat-card-actions>
<button mat-button color="primary">Add To Cart</button>
<button mat-button color="primary">Read More</button>
</mat-card-actions>
</mat-card>
</div>
</div>
Update styles.scss with mt-10 class.
.mt-10 {
margin-top: 10px;
}
That's end of it. Even though we didn't touch deeper into Angular, this will give you something to play with.
Comments
Post a Comment