Ever since I switched to Angular 4, my CSS seems to have stopped working.
While constructing the basic template for my app, I am encountering some challenges with CSS not being applied correctly to DIVS due to the generated Component DOM element of Angular.
This is what I aim for (1)
<div class="page-container ">
<div class="page-content-wrapper">
<div class="content">
Content here
</div>
<div class="container-fluid container-fixed-lg footer">
Footer here
</div>
</div>
</div>
This is what I currently have (2)
<div class="page-container ">
<div class="page-content-wrapper">
<div class="content">
<router-outlet>
Content here
</router-outlet>
</div>
<ae-footer-composant>
<div class="container-fluid container-fixed-lg footer">
Footer here
</div>
</ae-footer-composant>
</div>
</div>
This is my index.html file
<!doctype html>
<html lang="fr">
<head>
// Head content goes here
</head>
<body class="fixed-header">
<app-root></app-root>
// Styles and scripts linking - more assets
</body>
</html>
This is my app.component.html file
<!-- Page setup -->
<div class="page-container ">
<!-- Header section -->
<ae-header-composant></ae-header-composant>
<!-- Main content area -->
<div class="page-content-wrapper">
<div class="content">
<router-outlet></router-outlet>
</div>
<ae-footer-composant></ae-footer-composant>
</div>
</div>
// More component placeholders
Although my CSS aligns with (1) structure, it doesn't work well with (2) due to Angular's generated DOM...
I've tried the following workaround, but still facing issues:
import { Component, OnInit, ViewEncapsulation} from '@angular/core';
@Component({
selector: 'ae-sidebar-composant',
templateUrl: './sidebar-composant.component.html',
styleUrls: ['./sidebar-composant.component.css'],
encapsulation: **ViewEncapsulation.None**,
})
export class SidebarComposantComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
If anyone has suggestions or solutions, please share. Thank you!