Want to incorporate JQuery for DOM manipulation within Angular components, but only want it to target the specific markup within each component.
Trying to implement Shadow DOM with this component:
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import * as $ from 'jquery';
@Component({
selector: 'app-layout',
templateUrl: './layout.component.html',
styleUrls: ['./layout.component.less'],
encapsulation: ViewEncapsulation.Native
})
export class LayoutComponent implements OnInit {
constructor() { }
ngOnInit() {
}
toggleSidebar(): void {
$('.main-sidebar').toggleClass('active');
$('.content-wrapper').toggleClass('expanded');
}
}
HTML code:
<div class="wrapper">
<header class="main-header">
<a href="#" class="logo">Logo</a>
<nav class="navbar">
<button type="button" id="sidebar-collapse" class="btn btn-info navbar-btn" (click)='toggleSidebar()'>
<i class="fa fa-align-left"></i>
</button>
</nav>
</header>
<aside class="main-sidebar">
<section class="sidebar">
Sidebar
</section>
</aside>
<div class="content-wrapper">
<section class="content">
Content
</section>
</div>
</div>
If I remove the encapsulation, JQuery works fine. However, when I keep it, JQuery is unable to locate the elements being searched. Any suggestions on how to make JQuery identify those elements without using Shadow DOM?