DEV Community: kallaguntaashok

How to add default active property in the menu.

kallaguntaashok — Fri, 14 Jan 2022 06:44:39 +0000

<ul class="links">
                <li routerLinkActive="active"><i class='bx bx-news'></i><a routerLink="/Dashboard" >Dashboard</a></li>
                <li routerLinkActive="active">
                    <i class='bx bxl-slack'></i>
                    <a routerLink="/dwr">Build</a>                    
                </li>
                <li routerLinkActive="active">
                    <i class='bx bxs-chess'></i>
                    <a href="#">Master</a>
                    <i class='bx bxs-chevron-down js-arrow arrow '></i>
                    <ul class="js-sub-menu sub-menu">
                        <li><a href="#">Create Template Name</a></li>
                        <li><a href="#">Create Template schema</a></li>                        
                    </ul>
                </li>
            </ul>

I want to keep dashboard menu item as a default active.
active property is adding up once I click on the menu link, how to set the default active property when user launch the site.

how to remove the parent input field value on click of child component clear button?

kallaguntaashok — Thu, 13 Jan 2022 11:58:39 +0000

I have 2 issues facing with angular form.

<form autocomplete="off" ngNativeValidate class="row g-3 mb-3">

        <div class="col-md-12">
            <i class="bi bi-asterisk star"></i>
            <input type="text" placeholder="Description" id="txtBuildDescription" #BuildDescription name="Description" [(ngModel)]="build.BuildDescription" class="form-control form-control-sm" required>
        </div>

<app-info [build_row]="build_row" (parentSettings)="changSettings($event)" [build]="build"></app-info>

</form>

<form #infoBuild="ngForm" ngNativeValidate name="infoBuild" (keydown.enter)="$event.preventDefault()"
        (ngSubmit)="initiateNewBuildRequest()" autocomplete="off" class="row g-3">

<div class="col-md-4">
            <input type="text" placeholder="Build Request No" name="BuildRequestNo" required [(ngModel)]="model.BuildRequestNo"
                class="form-control form-control-sm">
        </div>
        <div class="col-md-2">
            <input type="text" placeholder="Rev" name="BuildRequestNoRev" required [(ngModel)]="model.BuildRequestNoRev"
                class="form-control form-control-sm">
        </div>
        <div class="col-md-6">
            <input type="text" placeholder="Description" name="BuildRequestNoDescription" required
                [(ngModel)]="model.BuildRequestNoDescription" class="form-control form-control-sm">
        </div>

<div style="margin-top: 20px !important;" class="text-center">
           <button type="button" style="zoom: 75%;" (click)="clearBuilds()" class="btn btn-warning btn-sm"><i
                    class="bi bi-patch-minus"></i>&nbsp;Clear</button>           
        </div>
</form>

on click of child "clear" button I want to remove the value from the parent fields, how to remove the parent input fields.
in the page I have 2 components, and the clear button is exist in child component, I am using required tag to validate the mandatory fields.

I am using ngNativeValidate to validate the form, it won' submit the form until user fill the required tag input fields.

in my case clear button is there in child component, and the form validation is working fine for child component fields, how do I make sure child button also should validate parent required input fields.

How to use onclick event in angular?

kallaguntaashok — Wed, 15 Dec 2021 16:20:15 +0000

let htmlcssArrow = document.querySelector(".htmlcss-arrow"); htmlcssArrow.onclick = function() { navLinks.classList.toggle("show1"); }

I would like to add above code in typescript angular, to add toggle style to my menu, I have used this code in javascript, it was working fine.

let navLinks = document.querySelector(".nav-links"); let htmlcssArrow = document.querySelector(".htmlcss-arrow"); htmlcssArrow.addEventListener("onclick", ()=>{ navLinks.classList.toggle("show1"); })

below code used in type script and it's not working.

Issue with angular expression

kallaguntaashok — Mon, 18 Oct 2021 12:25:29 +0000

Please check the image, I have error in anguar expression.