material2-app | Simple app that consumes Angular Material 2 components

I'm using ng2-tel-input in my angular App, so far it was working perfectly but suddenly I started getting an error

I installed angular/material2 using npm install --save @angular/material. I am using @angular/cli.

After angular/material is installed, the material folder which is under the node_modules/@angular folder, does not contain folders like button, button-toggle, card etc...that means I can't use the widgets in my app.

To solve this problem I did:

I'm trying to add material design to an angular app without any luck.

I installed material design, added all the modules to the app.moduel.ts file but the components look very bad.

I get this message: Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: https://material.angular.io/guide/theming

I added the link to the head of the index.html file

but for some reason I get a Status Code:404 Not Found. I tried to add the css files to assets, which didn't work.

It's a little weird, because if you check the sample app for material design on github there is no link to any theme css file.

https://github.com/jelbourn/material2-app/blob/master/src/index.html

http://localhost:4200/node_modules/@angular/material/prebuilt-themes/indigo-pink.css

My index.html file looks like this:

Im playing around with angular 4 and material 2. I want to make multiple theme, which I can toggle.

I've read the tutorial on angularjs and also read about themes on material 2. I also checked the example at https://material2-app.firebaseapp.com/ But they only use one component and I want to apply the same theme to everyone. And I have no Idea on how to make this possible. :S

This is the structure so far.

app.component.ts

I am working with angular/material2 and I am trying to get a dark theme. Following the doc at https://material.angular.io/guide/theming I defined my custom theme.scss as follows:

How would you to put md-toolbar on top of md-sidenavsimilar like https://inbox.google.com/u/0/?pli=1 using material2?

Here is an example of using md-sidenav https://github.com/jelbourn/material2-app md-sidenav with angular material2 but it is not behaving the way I want.

How would you would modify this example the way md-toolbar would stay on top of md-sidenav same way as in https://inbox.google.com/u/0/?pli=1

P.S There is a similar question md-sidenav toggle() is on top of the md-toolbar but the solution is not compatible with angular2 maerial2