Change Selector prefix with Angular CLI

Hey

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

 ng new my-app --prefix compantName 

Dynamic set / update filter value in gridfilter extjs

Hello,

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.clearFilters();
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 :) 

Custom Checkbox Css with and without label

Demo

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>
</div>


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">
</div>

CSS

/* 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;
  width:0;
  cursor: pointer;
}

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

.without input[type="checkbox"]:before {
  content: '';
  background:#F46A4A;
  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 :)

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 :)

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

Usage

ng help

Generating and serving an Angular project via a development server

ng new PROJECT-NAME

cd PROJECT-NAME

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 0.0.0.0 --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:

Scaffold	Usage
Component	ng g component my-new-component
Directive	ng g directive my-new-directive
Pipe	ng g pipe my-new-pipe
Service	ng g service my-new-service
Class	ng g class my-new-class
Guard	ng g guard my-new-guard
Interface	ng g interface my-new-interface
Enum	ng g enum my-new-enum
Module	ng g module my-module

1.      ng g module new-module to create a new moduleangular-cli will add reference to components, directives 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 component, directive 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
OR
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
OR
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
OR
ng build -prod --output-hashing=none

React Components in loop

How to create dynamic react component in loop

state={

  Userinfo:[

    { name: 'Ravish Jha', Location: 'India'},

    { name: 'Ritika Jha', Location: 'USA'},

    { name: 'Raju Jha', Location: 'UK'}

  ]

} 

render() {

return (

<div className="App">

{

this.state.Userinfo.map(info => {

return <Useroutput UserName= {info.name}
UserLocation={info.Location} />

})}

</div>

);

}

How to remove Checkout Step 2, Step 3, Step 4, Step 5 in opencart 2.3.0.2

Dear Friends :)

Here is some Steps for remove Open cart checkout Steps:

For steps 2 : { Billing Details }

Open your checkout.tpl
catalog\view\theme\default\template\checkout\checkout.tpl 

Steps: 1
And find 

Line Number 129
$('#collapse-payment-address .panel-body').html(html);

 And Replace with

$('#collapse-payment-address .panel-body').html(html);
//Remove Billing Details
$('#collapse-payment-address #button-payment-address').trigger('click');

Enjoy Comments are welcome.

For steps 3 :{ Delivery Details}

Open your checkout.tpl
catalog\view\theme\default\template\checkout\checkout.tpl 
And find 

Line Number 382 
$('#collapse-shipping-address .panel-body').html(html);

 And Replace with

 $('#collapse-shipping-address .panel-body').html(html);
// Remove Delivery Details
$('#collapse-shipping-address #button-shipping-address').trigger('click');

Enjoy Comments are welcome

For steps 4 : { Delivery Method }

Open your checkout.tpl
catalog\view\theme\default\template\checkout\checkout.tpl 

And find 

$('#button-shipping-address').button('reset');
                    },
                    success: function(html) {
                        $('#collapse-shipping-method .panel-body').html(html);

 And Replace with

$('#button-shipping-address').button('reset');
                    },
                    success: function(html) {
      //Ravish code
                        $('#collapse-shipping-method .panel-body').html(html);
                        $('#collapse-shipping-method #button-shipping-method').trigger('click');

Enjoy Comments are welcome

For steps 5 : { Payment Method  }

Open your checkout.tpl
catalog\view\theme\default\template\checkout\checkout.tpl 

And find 

 $('#button-shipping-method').button('reset');
                    },
                    success: function(html) {
                        $('#collapse-payment-method .panel-body').html(html);

 And Replace with

 $('#button-shipping-method').button('reset');
                    },
                    success: function(html) {
                        $('#collapse-payment-method .panel-body').html(html);
      // Ravish Code
      $('#collapse-payment-method #button-payment-method').trigger('click');

Enjoy Comments are welcome
Now You Removed all your steps if code is working fine please like and follow my page or comments on post

Thanks for Visit My Blog