We Keep Coding

Target Bootstrap HTML element with data-bs-target from another element in Angular

I am trying to open a Bootstrap (5) Offcanvas menu from an icon click event in Angular 12. I have tried many methods including wrapping it in a button (this works with one icon but I have an <fa-stack></fa-stack> element and this doesn't work for that for some reason), targeting the element id of a hidden button such as below:
<button #menuOpen [hidden]="true" class="btn" data-bs-toggle="offcanvas" data-bs-target="#slide-out-menu"
type="button" aria-controls="slide-out-menu">
</button>
<fa-stack (click)="menuOpen.click()">
<fa-icon [icon]="faCircle" stackItemSize="2x"></fa-icon>
<fa-icon [icon]="icon" [inverse]="true" stackItemSize="1x"></fa-icon>
</fa-stack>
<div #slideOutMenu class="offcanvas offcanvas-end" id="slide-out-menu" aria-labelledby="menu-label">
<div class="offcanvas-header">
</div>
<div class="offcanvas-body">
</div>
</div>
and also adding an [ngClass]="{'show', showMenu}" directive as well which doesn't work.
Is there a way to target this element and show it from a click event (not directly on the button)?

SOLUTION 1
If the hidden button and the <fa-stack> element are in the same component, you can use ViewChild to target the hidden button. And then use its nativeElement to alter the DOM with Renderer2:
#Component({
selector: 'my-app',
template : `
<button #menuOpen [hidden]="true" class="btn" data-bs-toggle="offcanvas" data-bs-target="#slide-out-menu"
type="button" aria-controls="slide-out-menu">
</button>
<fa-stack (click)="toggleMenuButton()">
<fa-icon [icon]="faCircle" stackItemSize="2x"></fa-icon>
<fa-icon [icon]="icon" [inverse]="true" stackItemSize="1x"></fa-icon>
</fa-stack>
`
})
export class App {
#ViewChild('menuOpen') menuButton: ElementRef;
constructor(private renderer: Renderer2) { }
toggleMenuButton() {
// Add "show" CSS-class to button
this.renderer.addClass(this.menuButton.nativeElement, 'show');
// Remove "show" CSS-class from button
this.renderer.removeClass(this.menuButton.nativeElement, 'show');
// Add "hide" CSS-class to button
this.renderer.addClass(this.menuButton.nativeElement, 'hide');
// Remove "hide" CSS-class from button
this.renderer.removeClass(this.menuButton.nativeElement, 'hide');
}
}
SOLUTION 2
If they're not in the same component, you can alternatively achieve this by using the querySelector() with pure javascript and search for an element with a certain attribute and value. So in your case, use this code to get a button that has attribute data-bs-target with value #slide-out-menu:
var targetElement = document.querySelector("button[data-bs-target='#slide-out-menu']");
console.log(targetElement);
<button #menuOpen [hidden]="true" class="btn" data-bs-toggle="offcanvas" data-bs-target="#slide-out-menu" type="button" aria-controls="slide-out-menu">
I am the button
</button>
And then alter the CSS or classes of the targetElement
const showMenu = () => {
targetElement.classList.add("show");
targetElement.classList.remove("hide");
}
const hideMenu = () => {
targetElement.classList.remove("show");
targetElement.classList.add("hide");
}

Change a div on click of button

I am new to front-end. Now, Here I have 3 divs which will be on the same page.and the position will also be same. it is like toggling .
So at the start this will be the div that I will show
<div text-angular id="htmlEditorId" >Abc</div>
then there is button whick is like
<button class="col-xs-3 btn btn-default" ng-click="changeTab()">NextTab </button>
On click of that button
<div text-angular id="secon">abcd</div>
this div should be shown and not the previous one.
And on again click of that button a third div
<div text-angular id="third">azzzbcd</div>
this should be seen and again on click first one should show . Its like a round robin fashion .
Now what I tried is using ng-show and ng-if. Can any one help me with this?
$scope.changeTab = function() {
$scope.showfirst = true;
$scope.showsecond = false;
}

It's quite simple, you can do it in many ways, for example:
In the controller
Define a scoped variable (bindable with the front-end)
$scope.showView = "firstView"
Define also a function:
$scope.changeView = function(value) {
$scope.showView = value;
}
In the html page define your divs and button
<button ng-click="changeView('secondView')">Chage View</button>
<div ng-show="showView == 'firstView'">abcd</div>
<div ng-show="showView == 'secondView'">abcd</div>

How do I toggle a class in Angular

I have a button that I want to be able to toggle a class on a div to hide and show the div how would I do that in Angular?
HTML
<div id="chatsidebar">
<app-chatsidebar></app-chatsidebar>
</div>
<div>
<button type="button" id="sidebarCollapse" class="btn btn-info" (click)="togglesideBar()">
<i class="glyphicon glyphicon-align-right"></i>
Toggle Sidebar
</button>
</div>
I want to add the class "active" onto the #chatsidebar div
app.component.ts
togglesideBar() {
}
Thanks

I'm answering this part of your question:
I want to add the class "active" onto the #chatsidebar div
To do it, you can use NgClass. NgClass allows you to add or remove any class to or from an element based on the given condition. Your code will looks something like this:
HTML
<div id="chatsidebar" [ngClass]="{'active': isSideBarActive}"> <!-- this ngClass will add or remove `active` class based on the `isSideBarActive` value -->
<app-chatsidebar></app-chatsidebar>
</div>
<div>
<button type="button" id="sidebarCollapse" class="btn btn-info" (click)="togglesideBar()">
<i class="glyphicon glyphicon-align-right"></i>
Toggle Sidebar
</button>
</div>
Component
isSideBarActive: boolean = true; // initial value can be set to either `false` or `true`, depends on our need
togglesideBar() {
this.isSideBarActive = !this.isSideBarActive;
}

HTML
<div id="chatsidebar" *ngIf="status">
<app-chatsidebar></app-chatsidebar>
</div>
<div>
<button type="button" id="sidebarCollapse" class="btn btn-info" (click)="togglesideBar()">
<i class="glyphicon glyphicon-align-right"></i>
Toggle Sidebar
</button>
</div>
app.component.ts:
status:boolean=true;
togglesideBar() {
if(this.status == true) this.status=false;
else this.status = true;
}
Demo:
https://plnkr.co/edit/fNoXWhUhMaUoeMihbGYd?p=preview

you can try below.
<div id="chatsidebar" class="{{activeClass}}"> ... </div>
and on your component define a property and set the class value on toggle function
// On Component
activeClass : string = "";
...
togglesideBar() {
this.activeClass = 'active'
}
it shall work, but may not the ideal solution.

Assuming you have a class named hide:
<div [class.hide]="hide">
<app-chatsidebar></app-chatsidebar>
</div>
<div>
<button type="button" class="btn btn-info" (click)="togglesideBar()">
<i class="glyphicon glyphicon-align-right"></i>
Toggle Sidebar
</button>
</div>
togglesideBar() { this.hide = !this.hide; }
This will hide the element in question, while leaving it in the DOM. The other solutions using *ngIf will add and remove the element to and from the DOM. There are subtle reasons in specific cases to prefer one over the other, well described in the on-line documentation you have already read. In this case, it doesn't really matter.
The [class.className]=boolean format is just one of several ways to control classes in Angular. For instance, you could also have said:
[ngClass]="{'hide': hide}"
This is slightly more flexible because you can add/remove multiple classes at once.
Since you are using glyphicons, you are probably using Bootstrap, so you most likely already have the hide class defined.
As an aside, you rarely need IDs, and using them is pretty much of an anti-pattern in Angular.

Take a variable in your component something like
isShowChatSidebar:boolean=true;
then modify your method and html
togglesideBar() {
this.isShowChatSidebar=!this.isShowChatSidebar
}
<div id="chatsidebar" [ngClass]="{'active': isShowChatSidebar}">>
<app-chatsidebar></app-chatsidebar>
</div>

How to check if the element is visible

How do i know if my element is visible or not using javascript. I'm using $('#element').hide();, $('#element').show(); to hidden or shown an element. How can i check if the element is shown? The element is in the modal. I tried to change the element which is not in the modal and it worked, but when i put the element inside the modal it's not working..
I tried using this code but it's not working.
<div class="well me">
<label for="majore">Major Exam</label>
<div class="input-group">
<input type="text" class="form-control majore" id="majore" oninput="total();"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
<script>
if ($('.me').is(':visible')) {
mt = m / 100 * 50 + 50;
}
</script>

"none" == document.getElementById("element").style.display //Check for hide
"block" == document.getElementById("element").style.display //Check for show
you can use like also
if ($('#element').css('display') == 'none') {
alert('element is hidden');
}

Checks for display:[none|block], ignores visible:[true|false]
$('#element').is(":visible");

It seems your selector is wrong.
Example of $("[element]").is(":visible") below: (for refrence)
$("#show").on("click", function() {
$("#text").show();
})
$("#hide").on("click", function() {
$("#text").hide();
})
$("#getStatus").on("click", function() {
alert($("#text").is(":visible"));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="text">Hello</div>
<button id="show">Show</button>
<button id="hide">Hide</button>
<button id="getStatus">Get Status</button>

$('.me') is a class selector which will return array of elements where elements have class me.
So you need to target the specific div either by using this or by using index as there can be many elements with same class name.
$('.me').is(':visible') this will check the first element and return result according to first element's visibility.
You can try
$(".me").eq(1).is(':visible') //Here 1 is index of div which can vary
OR
$(this).is(':visible')

Angularjs ng-show on ng-click not working

I have created a button like with angularjs,
<button class="btn btn-setting" ng-click="showSearch = ! showSearch" >
<img src="theme/images/settings.png" width="111">
</button>
And a div like ,
<div ng-include="'pages/include/search.html'" ng-show="showSearch" ></div>
I need to toggle the visibility of the above div on the button click.but it is not showing.

Update the showSearch model as follows
$scope.showSearch = {hideShowSearch : false}
Updated HTML
<button class="btn btn-setting" ng-click="showSearch.hideShowSearch = ! showSearch.hideShowSearch" >
<img src="theme/images/settings.png" width="111">
</button>
<div ng-show="showSearch.hideShowSearch" >This is the test</div>
EDIT -
In your script hideShowSearch is primitive one.So it does not perform two way data-binding.As result you not getting expected result.

Just do
<button ng-click="setshowme(show)"></button>
$scope.setshowme = function (value) {
if(value == true){
$scope.show = false;
}else{
$scope.show = true
}
}

Here is a simple JSFiddle
<button class="btn btn-setting" ng-init="showSearch = true" ng-click="showSearch = (showSearch) ? false : true;" >
<img src="theme/images/settings.png" width="111" />
</button>
<div ng-show="showSearch">Hello World</div>

First check these two elements (<button> & <div>) inside two ng-controllers
If so this will not work since ng-controllers have their own scopes. So that showSearch is in one scope and other controller scope do not have direct access to it.
Then check something like,
<div ng-show='showSearch'>show / hide div ...</div>
and see if this div is toggling its visibility.
if it working properly
then check the path to src of ng-include is correct.
here is a DEMO