Hi Readers,
I am happy to let you know that you can create your own component easily in the material2 with gulp.
But how can you do it, hmmm.... well this question bothered me for almost two weeks and successfully we (Pradeep my teammate and I) were able to tackle it.
Now i want to share this with you so that you can create your own component and start the site quickly.
Lets get dive together to dig the Angular Material2 repo to create a custom component.
Follow the below steps to create a custom component named Material Text:
This is not the component which is contributable but
1. Set up the Angular Material2 in your local. (Instruction to do it is in my Previous Blog).
2. When you are successfully setup with the running project. Now create a folder for the custom component in the /src/lib/ folder this is the folder which will be compiled in the /dist/@angular-material2 folder after build.
3. Add the appropriate files in this folder. I have already added so you can clone my Repo and see the files.
Clone URL: https://github.com/prashant162/GulpMaterial2.git
4. when you have cloned the repo you will see the appropriate files in the /src/lib/text folder.
5. Now lets add the same folder in the /src/demo-app folder. This is the folder which will be compiled in the /dist folder.
6. Add the appropriate files in the /src/demo-app/text folder, you can take reference from my repo that you cloned in the step3.
Please open the files and read the contents for the files yourself so that you can understand the meaning of each file and know what is for what.
7. Now add your component in the demo-app.ts to bootstrap it.
7.1 Import your module as "import {TextDemo} from './text/text-demo';" at the top
7.2 Now declare you component in the Declartion Array in the same file:
8. Okay lets test if we are able to build or not, actually we should be. So lets run the command "gulp build:devapp" from the root of the project.
9. If everything is okay you will be able to see the text folder that you created in the /src/lib folder in the /dist/@angular-material2 folder. Also, the folder that you created in the /src/deom-app folder will be visible in the /dist folder.
10. Now how the system will get to know that a new component has been added... So, for it lets add the entry for our component in the /src/lib/system-config-spec.ts and /src/demo-app/system-config.ts file in the "const component" array:
11. Now lets add our component in the routing so that we can show it by clicking in the sidebar navigation.
12. Import our custom component in the route.ts in the /src/demo-app/demo-app/routes.ts file, and add the entry in the "export const DEMO_APP_ROUTES: Routes" array like other components have.
13. Now to show it in the side navigation add the entry in the /src/demo-app/demo-app/demo-app.html as "<a md-list-item [routerLink]="['text']">Custom Text Component</a>" under the "<md-nav-list>" tag.
14. We are now one step far to see our component on the browser. Before there is one more place where we have to call the component. Lets add the entry in the /src/lib/all/all.ts folder:
14.1 Import our component in the all.ts like others component have been imported.
14.2 Make the entry in the "const MATERIAL_MODULES" array in the same file.
14.3 Access the function that you created in the /src/lib/text by putting the entry "MdTextModule.forRoot()," in the @NgModule({
imports: [ ] }) array.
15. Now lets do the "gulp build:devapp" and then "gulp serve:devapp".
16. Hurray... you will be able to see you custom component at the left navigation click on it and you will see it on your screen.
PLEASE LEAVE YOUR COMMENT BELOW IF YOU HAVE ANY QUESTION OR DOUBT, AND DO A SHARE IF YOU LIKE.
Thank you reader!!
I am happy to let you know that you can create your own component easily in the material2 with gulp.
But how can you do it, hmmm.... well this question bothered me for almost two weeks and successfully we (Pradeep my teammate and I) were able to tackle it.
Now i want to share this with you so that you can create your own component and start the site quickly.
Lets get dive together to dig the Angular Material2 repo to create a custom component.
Follow the below steps to create a custom component named Material Text:
This is not the component which is contributable but
1. Set up the Angular Material2 in your local. (Instruction to do it is in my Previous Blog).
2. When you are successfully setup with the running project. Now create a folder for the custom component in the /src/lib/ folder this is the folder which will be compiled in the /dist/@angular-material2 folder after build.
3. Add the appropriate files in this folder. I have already added so you can clone my Repo and see the files.
Clone URL: https://github.com/prashant162/GulpMaterial2.git
4. when you have cloned the repo you will see the appropriate files in the /src/lib/text folder.
5. Now lets add the same folder in the /src/demo-app folder. This is the folder which will be compiled in the /dist folder.
6. Add the appropriate files in the /src/demo-app/text folder, you can take reference from my repo that you cloned in the step3.
Please open the files and read the contents for the files yourself so that you can understand the meaning of each file and know what is for what.
7. Now add your component in the demo-app.ts to bootstrap it.
7.1 Import your module as "import {TextDemo} from './text/text-demo';" at the top
7.2 Now declare you component in the Declartion Array in the same file:
8. Okay lets test if we are able to build or not, actually we should be. So lets run the command "gulp build:devapp" from the root of the project.
9. If everything is okay you will be able to see the text folder that you created in the /src/lib folder in the /dist/@angular-material2 folder. Also, the folder that you created in the /src/deom-app folder will be visible in the /dist folder.
10. Now how the system will get to know that a new component has been added... So, for it lets add the entry for our component in the /src/lib/system-config-spec.ts and /src/demo-app/system-config.ts file in the "const component" array:
11. Now lets add our component in the routing so that we can show it by clicking in the sidebar navigation.
12. Import our custom component in the route.ts in the /src/demo-app/demo-app/routes.ts file, and add the entry in the "export const DEMO_APP_ROUTES: Routes" array like other components have.
13. Now to show it in the side navigation add the entry in the /src/demo-app/demo-app/demo-app.html as "<a md-list-item [routerLink]="['text']">Custom Text Component</a>" under the "<md-nav-list>" tag.
14. We are now one step far to see our component on the browser. Before there is one more place where we have to call the component. Lets add the entry in the /src/lib/all/all.ts folder:
14.1 Import our component in the all.ts like others component have been imported.
14.2 Make the entry in the "const MATERIAL_MODULES" array in the same file.
14.3 Access the function that you created in the /src/lib/text by putting the entry "MdTextModule.forRoot()," in the @NgModule({
imports: [ ] }) array.
15. Now lets do the "gulp build:devapp" and then "gulp serve:devapp".
16. Hurray... you will be able to see you custom component at the left navigation click on it and you will see it on your screen.
PLEASE LEAVE YOUR COMMENT BELOW IF YOU HAVE ANY QUESTION OR DOUBT, AND DO A SHARE IF YOU LIKE.
Thank you reader!!
