Browsed by
Category: Angular

How to add canonical link to all routers in Angular 7?

How to add canonical link to all routers in Angular 7?

How to add canonical link to all routers in Angular 7? When I was trying to find a snippet on how to add canonical link to all routers in Angular 7, I was able to find out lot of snippets in stackoverflow, github and few other blogs. But When I tested all the snippets from both stackoverflow and github, below snippet is the one which is working properly without any issues in all the use cases. Few issues I observed…

Read More Read More

803 total views, 2 views today

File upload (with meta data) in Angular 6 & Spring Boot 2

File upload (with meta data) in Angular 6 & Spring Boot 2

File upload (with meta data) in Angular 6 & Spring Boot 2 In Angular side create the component and typescript file similar to this, Part 1: Angular Side Development Angular Template(Html) file: <div class="row justify-content-center"> <label class="ct-input-file">My File Label Here <input type="file" (change)="onFileChange($event)"> <i class="icon-upload"></i> </label> </div> Note: class=”icon-upload” gives upload icon, if you don’t want then you can remove it for older way of file upload button. Angular Component(ts) file: FileUploadService is service class to deal api request and…

Read More Read More

1,385 total views, 4 views today

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.   2. Command to build angular universal: After configuring your angular 7 application to seo specific using angular universal run the below command to build angular universal configured project, npm run build:prod   3. Command to run angular universal: npm run start…

Read More Read More

570 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

712 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

760 total views, 4 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

1,420 total views, 1 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. 2,722 total views, 4 views today

2,722 total views, 4 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

720 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

914 total views, 2 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

1,350 total views, 3 views today