so trying modify css of element belonging parent component. have link once clicked routes new component popup modal. trying apply background color, opacity etc....to parent component. how can achieve this?
here example of trying achieve, click on login button , see popup appear , background change.
login component
import { component } '@angular/core'; @component({ selector: 'login', templateurl: './app/login/login.component.html', styleurls: [ './app/login/login.component.css' ] }) export class logincomponent {} main component routes login component
import { component } '@angular/core'; import { routeconfig, router_directives } '@angular/router-deprecated'; import { logincomponent } './login/login.component'; @component({ selector: 'main-component', templateurl: './app/main.component.html', styleurls: [ './app/main.component.css' ], directives: [router_directives] }) @routeconfig([ {path: '/login', name: 'login', component: logincomponent} ]) export class maincomponent {} html portion of main.component.html contains link routes login.component.ts. how use css on stylesheet lets z-index, opacity etc.....from login component?
<header> <h1>budget calculator</h1> <a id='login' [routerlink]="['login']">login</a> <router-outlet></router-outlet> <nav-bar></nav-bar> </header>
