Browsed by
Category: Angular

How to deploy angular 2/4/5/6 application from bitbucket to Nginx Server in AWS EC2

How to deploy angular 2/4/5/6 application from bitbucket to Nginx Server in AWS EC2

How to deploy angular 2/4/5/6 application from bitbucket to Nginx Server in AWS EC2: Prerequisite: Make sure you have installed following in your linux machines: Nginx server. git. Account in bitbucket (atleast in github to clone some angular app).   1. Create temp folder in root path and do git clone: sudo git clone -b my-Branch https://YOURUSERNAME@bitbucket.org/YOURUSERNAME/YOURPROJECT Here my-Branch is branch name, if you want the master to be cloned then your url will be like this, sudo git clone…

Read More Read More

80 total views, no views today

Difference between Component & Directive in Angular

Difference between Component & Directive in Angular

Difference between Component & Directive in Angular: Component: Components can be created using @Component annotation. <app-header></app-header>, here app-header is the component. Components helps to split the application into smaller components. Only one component can be used per DOM element. <app-header app-footer></app-header app-footer> can’t do like this and all. Directive: Directive can be created using @Directive annotation. <button highLightMe>I log when clicked!</button>, here highLightMe is the directive. Directives helps to design re-usable components. [highLightMe can be used in different tags to…

Read More Read More

738 total views, no views today

Difference between Structural and Attribute directives in angular?

Difference between Structural and Attribute directives in angular?

What is the difference between Structural and Attribute directives ? Directives are divided into two types namely Structural and Attribute directives. These are the differences: Structural directives: It changes the structure of the DOM. * is prefixed to the structural directives. *ngIf, *ngFor are the examples of structural directives.   Attribute directives: It just changes the appearance of the DOM. It is not prefixed with *. ngClass, ngStyle are the examples of attribute directives. 960 total views, no views today

960 total views, no views today

All about pipe in angular 5 for dummies (custom pipe | pure | impure pipes)

All about pipe in angular 5 for dummies (custom pipe | pure | impure pipes)

All about pipe in angular 5 for dummies (custom pipe | pure | impure pipes) We can create our custom pipes with the below steps: Create the typescript class with @Pipe decorator 2. Provide the name of the pipe to the @Pipe decorator’s name property. 3. Implement the class with PipeTransform 4. Provide the implementation of the pipe functionality inside the transform method. 5. transform is the method need to be used for any custom pipes and the same needs…

Read More Read More

458 total views, no views today

Generate angular + Java code using yeoman & Jhipster

Generate angular + Java code using yeoman & Jhipster

Generate angular + Java code using yeoman & Jhipster Ensure you have installed yeoman (yo when dealing with npm and yarn) and jhipster (generator-jhipster when dealing with npm and yarn). If not installed, have a quick look at,     Step 1: Run yo jhipster     It will ask around 10 to 15 questions, you can provide the sample values as per the above screenshot and proceed to step 2:   Step 2: Angular 5 & Java Codes are…

Read More Read More

572 total views, no views today

100 Things to Know in Angular 4/5

100 Things to Know in Angular 4/5

100 Things to Know in Angular 4 I started writing this post with the intention to keep important and crispy factor about angular in one place. But I am not able to write all the 100 things about angular same time, so I am publishing the post with the information I have handy now and I will make sure this post get updated often till we reach 100 things, if possible 200 things 😉 If you guys have something to…

Read More Read More

490 total views, no views today

Angular 5 Lifecycle Hooks for 2Mins Read

Angular 5 Lifecycle Hooks for 2Mins Read

Angular 5 Lifecycle Hooks for 2Mins Read: What are lifecycle hooks ? Lifecycle hooks are the different phases during component initializing and projection to view, when a new component is encountered in the selector, then angular takes care of initializing the component to project it in the view with different phases. These are called lifecycle hooks in angular. All these lifecycle hooks are called after the component’s constructor called.   These are lifecycle hooks of angular: ngOnChanges(): Executed multiple times….

Read More Read More

479 total views, no views today

Understanding angular 4/5 flow

Understanding angular 4/5 flow

Understanding angular 4/5 flow: In highlevel this is the flow, Main.ts > AppModule > App.component, it serves the content available in the Template file. I request you to run first angular cli project from this link, How to install Angular-CLI in Windows 7 ? Running First Angular-CLI Project in 2 Minutes then read below to understand how angular / angular flow works in detail.   Now let me explain how angular works actually, index.html file looks like this, index.html file…

Read More Read More

724 total views, no views today

Typescript Quick Notes for Angular Developers

Typescript Quick Notes for Angular Developers

Typescript Quick Notes for Angular Developers: As because of angular’s reach angular developers are forced to learn typescript. It is not tough but it is better to know the below basic syntax to code faster.   1. Converting array to JSON in typescript   selectedItems = []; JSON.stringify(this.selectedItems);       2. For loop in typescript   for(let item of items){ console.log(item.itemName) }   items is an array/collection of item.     3. String concatenation in typescript   appendTxtTemp:string =…

Read More Read More

793 total views, no views today