Getting stated with angular

In this article we will going to learne some basics of angualar.

First we need to setup environment to start angular learning.
1) install Node.js in from this site https://nodejs.org/en/download/
2) then to install angular open your CMD and type following command
npm install -g @angular/cli

Note – If you remove -g from above command it will install angular whose scope is limited to current folder in which you have installed it
3) You need editor to write and amange your code. Basically i am using visual studio code https://code.visualstudio.com/download

Let’s create our first project.

In, above command i have created new project Whose name is JusCompile. While creating project it will prompt you for adding angular routing and stylesheet format. I have added CSS type.
To run project use

ng s-o

command. your project will start running on 4200 default port for angular. To run project on different port use

ng s --port [Port-Number]

When you open newly created project. Inside src->App folder you will get total 5 files.
i.e.
1.app.coponent.html which contains our html template.
2.app.componet.ts which is used to write business logic.
3.app.component.css which is used to design our template.
4.app.component.spec.ts this file is use for testing purpose.
5.app.component.module this file is used to group the components in a project.

We will gonna use bootstrap in this project so let’s install it with
npm install --save bootstrap

this command will install latest version of bootstrap. For specific version use

npm install bootstrap@3.3.7 --save
after @ symbol mention the version you want to install in your project.

After installation copy the path of bootstrap.min.css and bootstrap.min.js files and paste it inside angular.json file.
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.min.js"
],

Their are two ays to write Html code in Angulat.
1 .Inside ts file we can directly write html code by using template inside @Component decorator

When you will run project.
o/p:
Just Compile
Welcome to just Compile.

Note: while writing html inside ts file always use back tick(`) caharacter don’t use double quote(“) or single quote (‘).

2. By creating seprate html file and providing its link by templateUrl.

Now, let’s create employee folder under app folder.
and add corresponding css,html and ts files.
employee.component.ts :

import { Component } from "@angular/core";

@Component({
selector: ‘JustCompile-employee’,
templateUrl: ’employee.component.html’,
styleUrls:[’employee.component.’]
})
export class EmployeeComponent {
title=”Welcome in Just Compile LLP”;
}

Inside @component annotation we use
selector: To add selector for our component.
templateUrl: To provide path of our html file.
styleUrls: To provide path of our stylesheet file.

employee.component.html:

{{title}}

Before using our component anywhere we must declare it inside app.module.ts file :
import { BrowserModule } from ‘@angular/platform-browser’;
import { NgModule } from ‘@angular/core’;
import { AppComponent } from ‘./app.component’;
import { EmployeeComponent } from ‘./employee/employee.componetn’;
@NgModule({
declarations: [
AppComponent,
EmployeeComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Now, use your selector inside.
app.component.html file :

Welcome to {{ title }}!
run the project
o/p:
  1. Interpolation {{ }}
  2. Property binding [ ]
  3. Event binding ( )
  4. *ngFor
  5. *ngIf

Interpolation {{ }} : This interpolation displays the value of property as a text. It cleans the code and display it in pure text form.We can use in

Property binding [ ]: With property binding we directly use the value of property with element attribute.

Event binding ( ):   With event binding we can handle events.

*ngFor :  With *ngFor qw can loop trough particular block in a html

*ngIf: With *ngIf we can hide and Show the component. It actually renders the component.

 

Please follow and like us:

Angular Element

Angular logo

In this article, we will create one simple angular element.

  1. Creating angular Project
  2. Adding element into project
  3. Deploying angular element

Let’s start..

1. Creating angular Project

Create angular project. Here i am creating project with name customer for this i have used V.S Code

2. Adding element into project

install all required files to cerate angular element

>ng add @angular/elements –project=customer

lets create our component which will display customer name and address
app.component.html

app.component.ts

now we need to add our component into module.Here instead of bootstrap:[] we are using entryComponents. use createCustomElement to register custom element with browser Custom Element Registry.

build your project. with the following command you will get new dist folder with some js files

>ng build –prod

We need some more packages to make our component work.

>npm install –save-dev concat fs-extra

create elements-build.js file to pull out all these into one file.

Now add new script to your package.json file, so it will build our component and generate file without hashed name.

“build:elements”: “ng build –prod –output-hashing none && node elements-build.js”

now build project,a fter runing this command you will get new folder it contains js file with element name

npm run build:elements

Now, create index.html file inside element folder

3. Deploying angular element

All is set for running our component we need server here i am using static server

>npm install static-server

Run static server inside your elements folder

>cd elements

>static-server

You might get following error

To solve this add following package

>npm i @webcomponents/custom-elements –save

Add script file into angular.json file

“node_modules/@webcomponents/custom-elements/src/native-shim.js”

Add following into polyfills.js

import ‘@webcomponents/custom-elements/custom-elements.min’;

Here our component is ready

Reason to Use angular element

  • Making reusable component. Which can also be used in non angular platform
  • It can also be used in your server side program
  • We can make dynamic angular application like dynamic dashboard by creating interpreter component which will create dashboard atv runtiime by using DynamicComponentLoader
  • Independent deployment

Please follow and like us: