Add Angular2 Material to Nativescript

angular material-design nativescript angular2-nativescript angular-material2
Emu picture Emu · Jan 31, 2017 · Viewed 7.3k times · Source

I've created a basic Nativescript app using: tns create my-project-name --template nativescript-angular-drawer-template

Now, I want to add Material Design to my app. According to the docs I ran the command npm install --save @angular/material and added the MaterialModule as per the docs. But my app giving errors of

Error finding module function

Any Idea?

Answer

Brad Martin picture Brad Martin · Jan 31, 2017

You won't be able to run material directly in nativescript because there is no DOM with nativescript unless you show a webview inside the native app. However with native android you don't need a library to get material design because it's where Google defines material so it's just native components. There are many plugins for several widgets because they don't belong in the nativescript core because they aren't cross platform, this is where many of the plugins use a native iOS library to make the nativescript plugin cross platform. A lot of this might be confusing :)

Here's one plugin https://github.com/bradmartin/nativescript-cardview for the material design cardview, this is native to Android via a library from Google that most apps ship with. Since iOS doesn't follow material design, we recently had a nice PR for the iOS side that just uses the native iOS UI controls to provide a similar looking UI component. Again, if you're unfamiliar with any of this I might be making it more confusing. If you need help or have questions a nativescript forums and slack channel are great to hang out in and get help from NS devs. Ping me there if you need something

Related questions

Angular material design - how to add custom button color?

I want to add my own custom colors, similar to "primary", "warn" etc. For example, I added a class for an orange background, but I use it as a class and not as a color attribute. It works, but the …

Read More
Binding element 'index' implicitly has an 'any' type

Using the demo project of angular2-mdl as a guide I ported the tab component and tried to implement it as follow: import { Component } from '@angular/core'; @Component({ selector: 'my-dashboard', templateUrl: './landing.my.html' }) export class MyDashboard { public …

Read More
Angular - 'Could not find HammerJS'

I'm working on a simple angular project where I am trying to import Material Design into my project but some of the components aren't working properly and a console warning says: Could not find HammerJS. Certain Angular Material components may …

Read More