carousel with angular material 2

Owl-carousel with material 2:
Myself Pradeep (Sitecore Developer & Angular Material Designer)

You are thinking why we want our own custom carousel with material 2, Because
there is no component for carousel by angular material 2 team.
And i want in my website thats why i am here....
So lets start
In previous blog i just tell you that how to setup material 2 
and now i am going to create new component with material 2 for carousel.
to get source code for carousel component Source-code
first i am running my repository

and now its running successfully...

and i will be add carousel component in this button-toogle of demo-app web application.

So be careful and see all the snapshots and if any problem then please comment....
now open your repository with any IDE but i am using visual Studio Code because of intellisense

To create new component with material 2 you must come inside lib directory (src/lib)

now copy any component to create your own component with existing structure.... as i

paste inside lib directory and rename with carousel to all file

now start from down to up so first open package.json where all the setting about component and now all with carousel as i

now open index.html and rename with carousel

now open carousel .ts and remove all the code except basic requirement and rename module with MdCarouselModule

next open carousl.scss and keep it empty for future change

now in last open carousel.html and make entry for dynamic markup

now it's time to make entry inside dictionry that you have new component for this we expand all directory and open all.ts

and make entry for carousel

and scroll down make this entry also

  this is also and after all this save file

and now open system.config.js inside lib directory and make entry for carousel

and make entry for external for owl-carousel.js and also map entry after that save file.

now for some moment please revise and check that everything done without any issue.if you have any issue till now then please comment with tag:1 i will understand in which part you are getting problem

Now i am going to use this component inside other project in sample project we have demo-app site
before start first go inside demo-app and open system.config and make entry for carousel to use inside this project

and scroll down and make entry for jquery as well as js for owl-carousel and map that jquery to use

now open index.html and make entry for owl-carousel css cdn link

now i am writing markup for own-carousel inside button-toggle



and initialize image object to use inside carousel



now run the project

Hey congrats it's running smoothly....

if you have any query, suggestion and want to help me teach me then please comment...
You comments are valuable for me

• and also give you feedback doesn't matter that it will be positive or negative...

Material 2 Setup

Hello Guys,

Myself Pradeep, and today i'm going to tell one of the most popular technologies these date....


Are you exited to know what will be that so i'm telling to you!!!!
And without wasting time i'm coming to the point and the topic is "Angular Material 2 Design".

Today i will show you that how can you how to setup material 2 and use them in your web project or for your client ....And i believe you know the advantage of using material design...

You know Material 2 uses "NodeJS, Angular 2, Typescript, Gulp, SCSS and many more...." So you can guess that what are you going to earn from here.

So before setup material 2 on your local system first you must follow all the step (at least read once, bcz if you leave any point then your whole attention will be wasted.) :

Step.1(Installation):


First check do you have node (latest version) at least 5.5.0 (if not then you must install).

Now to check node is installed on your local system:

goto cmd
               >node -v    
or
               >node --version

 After that Open cmd as administrator and type
             > npm install -g gulp

Step.2 (Initialization):

now its time to clone the repository from GIT (click here to clone the repository) by going to the location where you want to put your code.

after cloning go inside the project .
Now open cmd as administrator and install npm dependencies as project folder.

goto cmd
            > come to project's location
            > npm install

and wait

after successfully installation

To Build the project
         > gulp build: components

if build successfully then run the project by
        > gulp serve:devapp

After running this cmd you will see this ...

And now enjoy your project is now running successfully...

Enjoy Guys, and need any help or any suggestion then plz comment i will reply as soon as possible....

Getting Started with Material 2:

Getting Started with Material 2:

1. Prerequisite:
1. Node must be installed and version will be at least 5.5.0 version.
2. Npm must be there and version will be at least 3.3.12
3. Angular-cli must be there and version will be at least 1.0.0-beta.10
2. To check all these are installed on your local machine
1. > node -v
2. > npm -v
3. > ng -v
3. To install all these:
1. Choco install nodejs
2. From cmd prompt
1. Npm install -g angular-cli
4. Now to get angular-cli version 1.0.0 take prashant’s package.json file from docs.
5. Now it’s time to start with material 2.

Clone material from https://github.com/angular/material2

And now goto root folder

Npm install -g angular-cli

Npm install

ng init --source-dir app

Ng build

Ng serve (for first time)

For next time

Goto cmd prompt

Npm start

Enjoy Buddy!!!

datepicker hide icon

First to hide drop down datepicker container:

.md-datepicker-input-container {
  display: none;
}

If you want to hide datepicker icon:

.md-datepicker-button {
  display: none;
}