How to prevent loading css of parent component at the sub one

angular
1

Hi All,

I have the following component.

import { Component } from ‘@angular/core’;
import { RouterLink } from ‘@angular/router-deprecated’;

import ‘…/css/bootstrap.scss’; (this is located under /imports folder)

@Component({
selector: ‘home-page’,
templateUrl: ‘/client/imports/home-page/home-page.html’,
directives: [RouterLink]
})

export class HomePage {

constructor() {
}

}

What I want is to include another compontent to this one as follows,

import { SubComponent } from './imports/sub-component/sub-component;

At this subcomponent i want to use materialize-css as follows instead of bootstrap

import { Component } from ‘@angular/core’;
import { RouterLink } from ‘@angular/router-deprecated’;

import ‘…/css/materialize-css.scss’; (this is located under /imports folder)

But at the sub component, Bootstrap css also inherited. I dont want it to be loaded at this one. Do we have any way of doing this ?

Thanks in advance and really appreciated.