Browsed by
Category: Angular

Angular 4/5/6/7 Notes

Angular 4/5/6/7 Notes

Angular 4/5/6/7 Notes 1. To run different configuration with ng serve then run the below command, ng serve –configuration=local which will basically looks for the configuration files with local and picks that file configuration for this ng serve. 86 total views, 2 views today

86 total views, 2 views today

Ionic 4 Slider Previous Next Working Example with Angular 6

Ionic 4 Slider Previous Next Working Example with Angular 6

Hi All, Recently I got an opportunity to create slider with previous and next arrow marks for one of my mobile app, Herewith sharing the code to help someone. Part of the code from the following are actually taken out from stackoverflow & ionic support link, but still on top of it I did lot of things to make it work, so sharing here for someone.   home.component.html: <ion-header> <ion-toolbar> <ion-row class=”filters” style=”font-size:14px;”> <ion-col class=”col-with-arrow” (click)=”slidePrev()” no-padding col-2 style=”display: flex;justify-content:…

Read More Read More

150 total views, no views today

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

242 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

828 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. 1,292 total views, no views today

1,292 total views, no views today

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

All about pipe in angular 5/6 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

499 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

628 total views, no views today

100 Things to Know in Angular 4/5/6

100 Things to Know in Angular 4/5/6

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

557 total views, no views today

Angular 5/6 Lifecycle Hooks for 2Mins Read

Angular 5/6 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

529 total views, no views today

Understanding angular 4/5/6 flow

Understanding angular 4/5/6 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

796 total views, no views today