Use Angular Material in only a portion of a page - angularjs

Question

I am interested in using a Angular Material based contact form on a Shopify hosted page. Because the rest of the site is not built with Angular Material (yet), I would like to implement this contact form in a modular fashion, and have it isolated within its own div. The problem I've run into is that the stylesheet (currently linked in the head) for Angular Material is affecting page elements outside of the desired area of influence. Is it possible to isolate Angular Material content away from the rest of the page? How might one go about it?

Answer 1

You can create separate Angular module for you required template file and Inject angular material there. Link angular-material CSS in that template file only. This way It won't affect other pages.

Answer 2

The only way i think you can do this is by using an iframe because the css will always combine, and will follow the rule of cascade so the one that is below will override the others.

Answer 3

You can use angular-ui-router states with seperate angular modules. So you can inject angular-material one of the state of your routes then use it.
module.exports =
angular.module('parentModule', [
'angularMoment',
require("./childFolder"),
])
.config(function ($stateProvider) {
$stateProvider
.state('parent', {
url:"parent/",
views:{
'': {
templateUrl: 'main/layout.html',
controller: 'MainController'
}
}
})
.controller('MainController', require('./mainController'));
module.exports =
angular.module('childModule', [
'ngMateiral', 'ngMessages'
])
.config(function ($stateProvider) {
$stateProvider
.state('parent.child', {
url: "parent/:id",
views: {
'': {
templateUrl: 'main/layout.html',
controller: 'MainController'
},
'content#main': {
templateUrl: 'main/child/layout.html'
controller: 'ChildController'
}
}
});
})
.controller('ChildController', require('./childController'));