Is it possible to conceal a table element using [hidden] in Angular 2?

I have a table that includes buttons for adding rows.

Table application

Question: I am looking to hide the table element and add a show click event on the "Add" button. Here is an example of the HTML code:

<div class="col-md-12">
<div class="panel panel-default">
    <div class="panel-heading text-center">
        <h4 class="panel-title">
            Department (input)
        </h4>
    </div>
    <table class="table table-bordered">
        <tr>
            <th>Number</th>
            <th>Department Type</th>
            <th>District Type</th>
            <th>Start Points</th>
            <th>Delete</th>
        </tr>
        <tr *ngFor="let row of rowDataMainForm; let mainFormIndex = index">
            <td>
                <input type="text" class="form-control">
            </td>
            <td>
                <select class="form-control">
                    <option selected>-----</option>
                    <option value="D">D</option>
                    <option value="B">B</option>
                    <option value="P">P</option>
                </select>
            </td>
            <td>
                <select class="form-control">
                    <option selected>-----</option>
                    <option value="Primary">Primary</option>
                    <option value="Secondary">Secondary</option>
                    <option value="Temporary">Temporary</option>
                </select>
            </td>
            <td>
                <div class="panel panel-default smaller">
                    <table class="table table-condensed table-bordered">
                        <thead>
                            <tr>
                                <th>number</th>
                                <th>radius</th>
                                <th>X</th>
                                <th>Y</th>
                                <th>Height</th>
                                <th>Geometry</th>
                                <th>Rockets</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tr *ngFor="let newrow of row.tochkiStartaForms; let TochkiStartaFormIndex = index">
                            <td>
                                <input type="text" class="form-control">
                            </td>
                            <td></td>
                            <td>
                                <input type="text" class="form-control">
                            </td>
                            <td>
                                <input type="text" class="form-control">
                            </td>
                            <td>
                                <input type="text" class="form-control">
                            </td>
                            <td></td>
                            <td>
                                <div class="panel panel-default smaller">
                                    <table class="table table-condensed table-bordered">
                                        <thead>
                                            <tr>
                                                <th>Type</th>
                                                <th>Type CH</th>
                                                <th>Quantity</th>
                                                <th></th>
                                            </tr>
                                        </thead>
                                        <tr *ngFor="let suchnewrow of newrow.rocketForms; let RocketFormIndex = index">
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td>
                                                <button (click)="deleteRowRocketForm(newrow.rocketForms, RocketFormIndex)" type="button" class="btn btn-default" style="padding: 2px;">
                                                    Delete
                                                </button>
                                            </td>
                                        </tr>
                                    </table>
                                    <div class="panel-footer">
                                        <div class="container-build">
                                            <button (click)='addRowRocketForm(newrow.rocketForms)' type="button" class="btn btn-default" style="padding: 2px">
                                                Add
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <button (click)='deleteRowTochkiStartaForm(row.tochkiStartaForms, TochkiStartaFormIndex)' type="button" class="btn btn-default" style="padding: 2px">
                                    Delete
                                </button>
                            </td>
                        </tr>
                    </table>
                    <div class="panel-footer">
                        <div class="container-build">
                            <button (click)='addRowTochkiStartaForm(row.tochkiStartaForms)' type="button" class="btn btn-default" style="padding: 2px">
                                Add
                            </button>
                        </div>
                    </div>
                </div>
            </td>
            <td>
                <button (click)="deleteRowMainForm(rowDataMainForm, mainFormIndex)" type="button" class="btn btn-default" style="padding: 2px">
                    Delete
                </button>
            </td>
        </tr>
    </table>
    <div class="panel-footer">
        <div class="container-build">
            <button (click)='addRowMainForm(rowDataMainForm)' type="button" class="btn btn-default" style="padding: 2px">
                Add
            </button>
        </div>
    </div>
</div>

I am aware of using [hidden], but how can it be implemented in this case?

typescriptangular

Answer №1

It is suggested to utilize ngIf instead of hidden. The hidden attribute hides elements, while ngIf does not insert the element into the DOM, resulting in better performance in most cases (though not always).

Therefore, your code would appear as follows:

<button (click)="hideElement = !hideElement">Toggle Element</button>
<div *ngIf="hideElement">
    This content is hidden if the variable hideElement is true.
</div>

Keep in mind: If you are frequently showing/hiding an element, it may be more efficient to use [hidden] for toggling visibility rather than adding/removing with *ngIf.

Answer №2

To apply the hidden property, you must provide an expression that [hidden] will use. This can be achieved using a boolean variable to determine if the element should be hidden when the expression evaluates to true.

For instance, in Typescript:

class SampleController{
    private hideElement: boolean = false;

    toggleElement(){
        if(this.hideElement){
            this.hideElement = false;
        else
            this.hideElement = true;
    }
}

Now, in your template, you can implement this as follows:

<button (click)="toggleElement()">Toggle Element</button>
<div [hidden]="hideElement">
    This content is hidden if the boolean variable hideElement is set to true.
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Learn how to host a singular instance of an Angular application for every unique route, similar to the setup utilized in meet.jit.si

Is there a way to create an Angular app that loads a new instance of itself on every route/url? For example, visiting http://happy-app.com/happy would show the app in one state, and going to http://happy-app.com/happier would load the same app in a differe ...

angularwebsocketreal-time

Issue with Angular 5 - Deselect all checkboxes not reflecting in the UI

I am currently working on integrating a reset button into a Reactive form in Angular 5. The reset functionality works flawlessly for all form fields, except for the dynamically created multiple checkboxes. Although it seems like the reset operation is hap ...

javascriptangularcheckboxangular5

Tips for notifying the user about incorrect login credentials in Ionic 3

I'm attempting to implement a notification system using showAlert to inform users when they enter an incorrect email or password, but I'm having difficulty achieving this using try and catch statements Would it be feasible for me to use try and ...

javascripttypescriptionic3

Exploring an array in React using typescript

I have a persistent data structure that I'm serving from the API route of my Next.js project. It consists of an array of objects with the following properties: export interface Case { id: string; title: string; participants: string[]; courtDat ...

reactjstypescriptnext.jsreact-query

The absence of essential DOM types in a TypeScript project is causing issues

Recently, I've been working on setting up a web app in TypeScript but I seem to be missing some essential types that are required. Every time I compile using npm run build, it keeps throwing errors like: Error TS2304: Cannot find name 'HTMLEleme ...

javascripttypescriptnpm

Every time I clear the information, it seems to be instantly replaced with new data. How can I prevent it from constantly refilling?

When I press the remove button on my application, it successfully deletes the data in a field. However, it also automatically adds new data to the field which was not intended. I am seeking assistance on how to keep those fields empty after removing the ...

reactjstypescriptapi

Error type inferred by TypeScript

I am currently in the process of learning TypeScript, and I encountered some errors in the code below: Error: Unexpected token. A constructor, method, accessor, or property was expected. [ts] Declaration or statement expected. class duckType{ public ...

typescript

Bringing in the component's individual module

I encountered the error message in my Angular application - Can't bind to 'formGroup' since it isn't a known property of 'form' - and managed to resolve it by including the import import { AddEditModule } from './add.edit ...

javascriptangularimport

The conflicting definitions of identifiers in one file are at odds with those found in a

Currently, I am in the process of updating an aged component from Typescript version 6 to version 8. After making changes to the Jasmine dependencies listed in the package.json, a new error has been encountered: "There are conflicting definitions for th ...

angulartypescriptjasmine

Obtain information from a JSON file based on a specific field in Angular

The structure of the JSON file is as follows: localjson.json { "Product" :{ "data" : [ { "itemID" : "1" , "name" : "Apple" , "qty" : "3" }, { "itemID" : "2" , "name" : "Banana" , "qty" : "10" } ] ...

jsonangulartypescriptservice

Unlocking the Magic: A Step-by-Step Guide to Generating PDFs with

I'm currently engaged in developing an IONIC venture employing JavaScript and Angular. One of the tasks entails creating a comprehensive PDF report featuring text, images, and graphs. Instead of hand-crafting all the elements, I'm keen on adoptin ...

angularangularjspdfionic-framework

Utilize ngrx effects for making API requests without storing the response in the store

Currently, I am working on an Angular project that utilizes ngrx/store. One of my components requires data from the backend. The usual flow for this scenario is as follows: dispatch a Action trigger an Effect --> make a call to the backend update the ...

angularngrx

increase the selected date in an Angular datepicker by 10 days

I have a datepicker value in the following format: `Fri Mar 01 2021 00:00:00 GMT+0530 (India Standard Time)` My goal is to add 60 days to this date. After performing the addition, the updated value appears as: `Fri Apr 29 2021 00:00:00 GMT+0530 (India St ...

javascriptangulartypescript

Angular HttpInterceptor failing to trigger with nested Observables

Utilizing a HttpInterceptor is essential for adding my Bearer token to all calls made to my WebApi. The interceptor seamlessly functions with all basic service calls. However, there is one specific instance where I must invoke 2 methods and utilize the re ...

angulartypescriptrxjsobservableangular-http-interceptors

The data in the array JSON is undefined, resulting in the inability to read property 'x'

Having issues with my code snippet: <div class="photo-gallery1" *ngIf="plans.attachments.length > 0"> ... </div> Here is the JSON data for 'plans': https://i.sstatic.net/zqsMg.png I encountered an error in my code: https://i.s ...

angular

Creating Apache Arrow vectors in TypeScript for writing data to a Table

Currently, I am in the process of creating a method that is designed to take a column of data, referred to as data: any[], and then pack it into an Arrow-typed Array Buffer for insertion into an Arrow table. To illustrate with an example, if we consider T ...

javascripttypescriptapache-arrow

Generating dynamic components using React and TypeScript

Creating a multi-step form using a set of components can be tricky. One approach is to compile all the components into an array and then use the map() method to render them in sequence. const stepComponents = [ <SelectCoach/>, <SelectDate/> ...

reactjstypescripttsx

Is there a way to convert a JavaScript object to a class while eliminating unnecessary properties?

In my current project, I am using Typescript with ExpressJS to build APIs. Let's say I have a typescript User model defined as follows: class UserModel { id: number; email: string; password: string; name: string; dob: Date; ge ...

javascriptnode.jstypescriptexpress

Integration of Mocha with WebStorm

WebStorm offers a useful feature that adds a small arrow next to describe() and it() keywords when writing tests with Mocha, allowing for easy manual execution. However, there is a challenge: I require additional setup before each test, leading me to use ...

typescriptidemocha.jswebstorm

unable to retrieve the value from the scope

I'm trying to implement the following code in HTML: <div ng-if="item.shareText"> <textarea></textarea> <div> <select ng-model="shareOptions"> <option value="PUBLIC" selected>public</option> ...

javascriptangularjsangularscopeangularjs-scope