Monday, May 25, 2020

Angular component Lifecycle Hooks

Lifecycle Hooks

  1. ngOnChanges()
    • Used in pretty much any component that has an input.
    • Called whenever an input value changes
    • Is called the first time before ngOnInit
  2. ngOnInit()
    • Used to initialize data in a component.
    • Called after input values are set when a component is initialized.
    • Added to every component by default by the Angular CLI.
    • Called only once
  3. ngDoCheck()
    • Called during all change detection runs
      • A run through the view by Angular to update/detect changes
  4. ngAfterContentInit()
    • Called only once after first ngDoCheck()
    • Called after the first run through of initializing content
  5. ngAfterContentChecked()
    • Called after every ngDoCheck()
    • Waits till after ngAfterContentInit() on first run through
  6. ngAfterViewInit()
    • Called after Angular initializes component and child component content.
    • Called only once after view is initialized
  7. ngAfterViewChecked()
    • Called after all the content is initialized and checked. (Component and child components).
    • First call is after ngAfterViewInit()
    • Called after every ngAfterContentChecked() call is completed
  8. ngOnDestroy()
    • Used to clean up any necessary code when a component is removed from the DOM.
      • Fairly often used to unsubscribe from things like services.
    • Called only once just before component is removed from the DOM.

Thursday, December 19, 2019

How to apply multiple template bindings on one element in angular

Can't use two template binding on one element in Angular 2 (like *ngIf and *ngFor). 
you need to create ng element over your code (td , li)

<ng-container *ngIf="condition">
    <li *ngFor="let item of items">


Monday, December 16, 2019

Change Selector prefix with Angular CLI


Use this cmd line for changing default prefix app to your company name  or tag

 ng new my-app --prefix compantName 

Tuesday, August 13, 2019

Dynamic set / update filter value in gridfilter extjs


We have added the following functionality to the GridFilters
Each filter has SetActive and SetValue methods which can be used to set filter value during AjaxEvent
On client side you can use the following functions to set filter
grid.getFilter('dataindex').setValue("value"); //string filter
grid.getFilter('dataindex').setValue(true); //bool filter
grid.getFilter('dataindex').setValue({gt:2, lt:9, eq:5}); //numeric filter
grid.getFilter('dataindex').setValue({before: new Date(2008,0,1), after:..., on:...}); //date filter
grid.getFilter('dataindex').setValue(['item1', item2]); //list filter

grid.getFilter('dataindex').setActive(false); //turn off filter
Comments are always welcome :) 

Thursday, May 30, 2019

Custom Checkbox Css with and without label


HTML for checkbox is

With Label

<div class="boxes withlabel">
  <input type="checkbox" id="rj-1">
  <label for="rj-1">Hello World</label>

  <input type="checkbox" id="rj-2" checked>
  <label for="rj-2">RJ Code for every one </label>

  <input type="checkbox" id="rj-3">
  <label for="rj-3">Checkbox with label</label>

With out Label

<div class="boxes without">
  <input type="checkbox" id="box-1">
  <input type="checkbox" id="box-2" checked>

  <input type="checkbox" id="box-3">


/* With label Checkboxes styles*/

.withlabel input[type="checkbox"] { display: none; }

.withlabel input[type="checkbox"] + label {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 20px;
  font: 14px/20px 'Open Sans', Arial, sans-serif;
  color: #fff;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;

.withlabel input[type="checkbox"] + label:last-child { margin-bottom: 0; }

.withlabel input[type="checkbox"] + label:before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border: 2px solid #fff;
  position: absolute;
  left: 0;
  top: 0;
  opacity: .6;
  -webkit-transition: all .12s, border-color .08s;
  transition: all .12s, border-color .08s;

.withlabel input[type="checkbox"]:checked + label:before {
  width: 10px;
  top: -5px;
  left: 5px;
  border-radius: 0;
  opacity: 1;
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);

/* With out Checkboxes styles*/

.without input[type="checkbox"] {
  display: block;
  position: relative;
  margin-bottom: 20px;
  cursor: pointer;

.without input[type="checkbox"]:last-child { margin-bottom: 0; }

.without input[type="checkbox"]:before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border: 2px solid #fff;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transition: all .12s, border-color .08s;
  transition: all .12s, border-color .08s;

.without input[type="checkbox"]:checked:before {
  width: 10px;
  top: -5px;
  left: 5px;
  border-radius: 0;
  opacity: 1;
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);

Enjoy Comments are welcome :)

Thursday, February 21, 2019

Error in creating angular component from CLI

Error code is:

More than one module matches. Use skip-import 
option to skip importing the component into the 
closest module.

This Error is related to component module file When we have multiple module file (more than one) then auto generated component is missing module path so we need to give module path with component name like :

 ng g c ./feature/ComponentName --module modulePath

For Example

ng g c ./feature/metric-detail --module app 

comments are always welcome :)

Tuesday, February 19, 2019

Angular CLI cheat sheet

Install Globally

npm install -g @angular/cli

Install Locally

npm install @angular/cli
To run a locally installed version of the angular-cli, you can call ng commands directly by adding the .bin folder within your local node_modules folder to your PATH. The node_modules and .bin folders are created in the directory where npm install @angular/cli was run upon completion of the install command.
Alternatively, you can install npx and run npx ng <command> within the local directory where npm install @angular/cli
 was run, which will use the locally installed angular-cli.

Install Specific Version (Example: 6.1.1)

npm install -g @angular/cli@6.1.1


ng help

Generating and serving an Angular project via a development server

ng serve
Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
You can configure the default HTTP host and port used by the development server with two command-line options :
ng serve --host --port 4201

Generating Components, Directives, Pipes and Services

You can use the ng generate (or just ng g) command to generate Angular components:
ng generate component my-new-component
ng g component my-new-component # using the alias 
# components support relative path generation 
# if in the directory src/app/feature/ and you run 
ng g component new-cmp
# your component will be generated in src/app/feature/new-cmp 
# but if you were to run 
ng g component ./newer-cmp
# your component will be generated in src/app/newer-cmp 
# if in the directory src/app you can also run 
ng g component feature/new-cmp
# and your component will be generated in src/app/feature/new-cmp 
You can find all possible blueprints in the table below:

ng g component my-new-component
ng g directive my-new-directive
ng g pipe my-new-pipe
ng g service my-new-service
ng g class my-new-class
ng g guard my-new-guard
ng g interface my-new-interface
ng g enum my-new-enum
ng g module my-module
1.      ng g module new-module to create a new moduleangular-cli will add reference to componentsdirectives and pipes automatically in the app.module.ts. If you need to add this references to another custom module, follow these steps:
2.       call ng g component new-module/new-component
This should add the new componentdirective or pipe reference to the new-moduleyou've created.

Updating Angular CLI

If you're using Angular CLI 1.0.0-beta.28 or less, you need to uninstall angular-clipackage. It should be done due to changing of package's name and scope from angular-clito @angular/cli:
npm uninstall -g angular-cli
npm uninstall --save-dev angular-cli
To update Angular CLI to a new version, you must update both the global package and your project's local package.
Global package:
npm uninstall -g @angular/cli
npm cache verify
# if npm version is < 5 then use `npm cache clean` 
npm install -g @angular/cli@latest
Local project package:
rm -rf node_modules dist 
# use rmdir /S/Q node_modules dist in Windows Command Prompt; 
use rm -r -fo node_modules,dist in Windows PowerShell 
npm install --save-dev @angular/cli@latest
npm install

Some Useful Flag for Angular CLI.

1.     To open project automatically in a browser Tab
ng serve --o
ng serve --open
2. Create project with routing file by default
ng new ProjectName --routing
3. Run project on different Port (Apart from default Port 4200)
ng serve --port 4201
4. Changing Base href while build
ng build --base-href=yourValue
ng build --base-href /myUrl/
5. For performance of your application
* ng build --prod
* ng build --aot
6. Adding custom prefix for new project
ng new your-project --prefix custom
7. For Inline Template/Style of your component
ng g c button --inline-style --inline-template
You can anyone as per your requirements.
8. Avoid Hashing of file names while bundle your application
ng build -prod --output-hashing none
ng build -prod --output-hashing=none