Browsed by
Category: Angular

Angular Errors & Solutions

Angular Errors & Solutions

How to fix “This usually happens because your environment has changed since running npm install.” this issue ? This issue generally happens if you updated or reinstalled your npm. The easiest solution is, Solution 1: Solution 2: If it does not work, then try removing the node_modules folder and then then try, Solution 3: [This is the one worked for me] Remove browserlist.cmd and browserlist file from your project’s root folder then try ng build then ng server 506 total views,…

Read More Read More

506 total views, no views today

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

1,111 total views, no 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

2,086 total views, no views today

Angular 4/5/6/7 Notes

Angular 4/5/6/7 Notes

Angular 4/5/6/7 Notes 1. How to run angular application with different configurations ? 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. How 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….

Read More Read More

926 total views, no 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

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

1,085 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

1,773 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. 3,358 total views, no views today

3,358 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

868 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

1,078 total views, no views today