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          ...

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   ...