Angular

Angular Errors & Solutions

Angular
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: npm install node-sass Solution 2: If it does not work, then try removing the node_modules folder and then npm install then try, ng serve 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

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

Angular, Articles
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 with other snippets: When ever navigation is happened it is keep on adding the canonical link tags, this below snippet just keeps only one canonical link tag. Duplicate canonical link tags added due to above point 1, this below snippet uses update method which always removes and adds the canonical link tag, so this helps to keep only one canonical link tag. No update/remove to...

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

Angular, Java
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: [html] <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> [/html] 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 responses. MetaDataBean is bean class to send to your api along with the file. Please also read the inline comments...

Angular 4/5/6/7 Notes

Angular
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. How to run angular universal ? npm run start 4. How to run angular application in different port than 4200(default port) ? ng serve --port=4300 this will run the application in port 4300, instead of the default port 4200. 5. How to check your angular application's version ? Go...

Ionic 4 Slider Previous Next Working Example with Angular 6

Angular, Ionic
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: [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: center;align-items: center;"> <ion-icon *ngIf="showLeftButton" name="arrow-back" style="color: #ccc;"></ion-icon> </ion-col> <ion-col no-padding col-8> ...

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

Angular, AWS, Git/Bitbucket, Nginx
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 https://YOURUSERNAME@bitbucket.org/YOURUSERNAME/YOURPROJECT 2. Now get into your project folder and run the below steps: sudo sudo npm install and sudo sudo ng build --prod sudo sudo given two times to solve the permission related issues, prefer to give...

Difference between Component & Directive in Angular

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 highlight the text present inside the tags]. Multiple directive can be used per DOM element. <p highLightMe...

Difference between Structural and Attribute directives in angular?

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.

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

Angular
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 to return something. 6. Once the custom pipe is created then we need to add it to our app module. (app.module.ts file) 7. Then it can be used in any templates Eg: Now I am going to create the simple pipe to make the first letter alone to capital. [html] @Pipe({name:'FirstCap'}) export class FirstLetterCapPipe impleme...

Generate angular + Java code using yeoman & Jhipster

Angular, Articles, Java, Tutorials
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 generated   Yeoman generating the java source code:     yeoman generating the angular source code:     Both client (angular 5 - as on march 1st ) and server applications are successfully generated.     Step 3: Run mvnw to run the server application I ran mvnw (in...