Posts

Showing posts from April, 2019

Common Breakpoints

Common Breakpoints: SCSS CODE: @mixin for-phone{ @media (max-width: 599px) { @content; } } @mixin for-tab-p { @media (min-width: 600px) { @content; } } @mixin for-tab-l { @media (min-width: 900px) { @content; } } @mixin for-desktop{ @media (min-width: 1200px) { @content; } } @mixin for-desktop-big { @media (min-width: 1800px) { @content; } } // usage .my-box { padding: 10px; @include for-desktop { padding: 20px; } } /* Smartphones (portrait and landscape) ----------- */ @media only screen and ( min-device-width : 320px ) and ( max-device-width : 480px ) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and ( min-width : 321px ) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and ( max-width : 320px ) { /* Styles */ } /* iPads (portrait and landscape) ----------- */ @media only screen and ( min-device-width : 768px ) and ( max-device-width : 1024px ) { /* Styles *

Angular Material Date Picker Formater

Angular Material Date Picker Formate: 1.) Import in Main module and Provider [ import { DatePipe } from '@angular/common' ;   @ NgModule ({ imports : [ BrowserModule , .... ], entryComponents : [ ], declarations : [ ], bootstrap : [ ], providers : [ DatePipe ] }) export class AppModule {} 2.) Import in Component wher u can use import { DatePipe } from '@angular/common' ; Toset: constructor ( private DatePipe : DatePipe ){ this . startDate = new Date ( '04/06/2019' ); } To get: let data = this . DatePipe . transform ( this . startDate , 'MM/dd/yyyy' ) Example :                https://stackblitz.com/edit/angular-cyseqq?file=app/datepicker-value-example.ts

Create React Component and publish to NPM

Create React Component and publish to NPM: //////////////Create React LibRary/////////////// //////////////Create React LibRary/////////////// //////////////Create React LibRary/////////////// 1.) install      cmd:    npm install -g create-react-library 2.) Create Lib Config      cmd:    create-react-library 3.) Now u can see Example Folder(Dummy React app where u can test your plugin)     Go that folder cd ./Example     In One Tab     cmd:    npm start 4.) In Another Tab     got to main folder where u can see package.json files     cmd:    npm start 5.) for upload on github     Note:   create repository in github without README.md files den do following step             In json file chagnes folowing things based on your repository             {                 ....                 "name": "cui-autoselect-react-ra-lib",                 "version": "1.0.1",                 "descrip

Batch to Angular Component Library

Batch files for Angular Component  creation @echo off echo "Welcome to Angular Lip App" REM Changing Path     cd\xampp\htdocs\     cd REM Checking Version     echo "///////////////////////////////////////////////////////////////////////////"     echo "Your NPM version"     call npm -v     echo "Your CLI version"     call ng -v REM Get Project name from User     echo "///////////////////////////////////////////////////////////////////////////"     :GETLIPNAME     set /p inputone=Enter Lib Name it will become(*-ra-lib-app):     set temp1=-ra-lib-app     set temp2=-ra-lib     set projectName=%inputone%%temp1%     set libname= %inputone%%temp2%     IF EXIST %projectName% (         echo "Folder Already exists plz enter new one......"         GOTO GETLIPNAME     ) ELSE (         echo "//////////////////////////////////////////////////////////////////////////////"         echo "App star