Fire the mat-expand-panel event by clicking a button in a separate component

I'm fairly new to Angular, and I'm trying to incorporate a button into my search/filter bar that will expand the mat-expansion-panel when clicked. The panels are located in a different component, and I'm uncertain about how to structure this.

Button HTML:

      <input *ngIf="!(isMobile$ | async) && (isOnline$ | async)"
      #filterTextInput
      id="filter-text-input"
      class="numeric-input"
      type="text"
      [value]="itemFilterText$ | async"
      autocomplete="off"
      placeholder="{{'HEADER.SEARCH.PLACEHOLDER' | translate}}"
      attr.aria-label="{{'HEADER.SEARCH.PLACEHOLDER' | translate }}"
      (keyup.enter)="searchForValue(searchString.value)" />
      <button mat-raised-button (click)="togglePanel">Open</button>

This is where the functionality should be implemented in the TS file:

import { Component, OnInit, Output, EventEmitter, ViewChildren, QueryList, ElementRef, ChangeDetectionStrategy } from '@angular/core';
import { Worksheet, StorageArea, WorksheetItem, CountableItem, CountingUnit, ConversionUnit } from 'src/app/models';
import { StorageAreaUtilsService } from 'src/app/services/storage-area-utils.service';
import { Store } from '@ngrx/store';
import { AppState } from 'src/app/store/reducers';
import { first, filter, map, flatMap } from 'rxjs/operators';
import { SetStorageAreaExpandStatus, PatchStorageArea, GetAllCustomItemDataAttempt } from 'src/app/store/actions/worksheets.actions';
import { combineLatest, Observable } from 'rxjs';
import { PageEvent, MatPaginator } from '@angular/material';
import { InventoryConstants } from 'src/app/inventory-constants';
import { GetMeasurementUnitsAttempt } from 'src/app/store/actions/addItems.actions';
import { InventoryValueService } from 'src/app/services/inventory-value.service';

...
...

togglePanel() {
    this.panelOpenState = !this.panelOpenState
}

If more code is required, please let me know. Any suggestions would be appreciated!

Answer №1

If you want to expand the mat-expansion-panel, simply adjust the [expanded] attribute.

<mat-expansion-panel [expanded]="true"></mat-expansion-panel>

When it comes to communication between components, using an EventEmitter is a common practice.

Take a look at this Angular example showcasing how they are used:

@Component({
selector: 'zippy',
  template: `
  <div class="zippy">
    <div (click)="toggle()">Toggle</div>
    <div [hidden]="!visible">
      <ng-content></ng-content>
    </div>
 </div>`})
export class Zippy {
  visible: boolean = true;
  @Output() open: EventEmitter<any> = new EventEmitter();
  @Output() close: EventEmitter<any> = new EventEmitter();

  toggle() {
    this.visible = !this.visible;
    if (this.visible) {
      this.open.emit(null);
    } else {
      this.close.emit(null);
    }
  }
}

In your HTML template, specify the method to be called when the EventEmitter emits:

<zippy (open)="onOpen($event)" (close)="onClose($event)"></zippy>

Essentially, in your scenario, the component containing the button would manage the event emitters, while your StorageAreaPanel would listen for them.

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

Angular ngStyle Parsing Issue: Encountered an unexpected symbol [ when an identifier or keyword was expected

Is there a way to pass a dynamic string using the fieldName to retrieve an attribute from the item object without encountering syntax errors in older versions of Angular? Here is a simple example to illustrate the issue. While this code works fine with ang ...

Incorporating Angular for Dynamic Subdomains

Currently utilizing Angular for our project. We are in need of multi tenancy support for URLs containing sub domains. Our product is akin to Slack, where each tenant (client) possesses their own segregated database. Therefore, we desire for them to acces ...

The Angular Button fails to display when all input conditions are met

I'm currently working on validating a form using this link. The requirement is simple - when an input field is invalid, the `save` button should be disabled. Conversely, when all input fields are valid, the `SAVE` button should be enabled/shown. The & ...

Guide on positioning a span element to the left using the margin auto property in CSS for Angular 4

Having trouble with moving numbers highlighted to the left with names in CSS. I've tried using flex direction and margin auto but can't achieve the desired result. https://i.sstatic.net/kRJOb.png Here is my HTML code: <section class="favorit ...

Submit numerous queries to verify the presence of a name and assign it to the name attribute

I have a collection of unique devices. As part of a process, I need to assign a default name to each device ("DeviceX" - where X is a sequential number), but some of the names may already be in use. To handle this, I must make a request to check ...

Is it possible to deduce the output type of a function based on its input?

In a web development project, the function getFormData() plays a crucial role in validating and sanitising a FormData object based on a specified schema. If the validation process goes smoothly without any errors, the function will return the cleansed Form ...

Utilize TypeScript to import a JSON file

I am trying to incorporate a JSON file using TypeScript, which contains data about different regions in Italy along with their respective capitals. Here is a snippet of the data: { "italia": [ { "regione": "Abruzzo", "capoluoghi": [ ...

When a 401 error occurs, Angular's HttpClient subscribe method fails to capture the error

Something odd is happening with my code. Within my service, I have a simple httpClient get method. When the API responds with a status of 401, I expect it to trigger an error... but it doesn't. Instead, only 'complete' appears in the console ...

Leveraging parameters within a sequence of object properties

Within the realm of Angular, I am dealing with interfaces that take on a structure similar to this (please note that this code is not my own): export interface Vehicles { id: number; cars: Car; trucks: Truck; } Export interface Car { make: ...

Unable to display Md-checkbox component in Angular 2

I have been attempting to display a checkbox within my Angular 2 application, however, it doesn't seem to be appearing. What are some potential reasons for this issue? <md-checkbox [checked]="true">Unchecked</md-checkbox> <md-checkbox ...

Issues with the functionality of Angular 2 routerLink

Unable to navigate from the homepage to the login page by clicking on <a routerLink="/login">Login</a>. Despite reviewing tutorials and developer guides on Angular 2 website. Current code snippet: index.html: <html> <head> ...

"What is the appropriate TypeScript type for this specific JSX code - React.ReactElement, React.ReactNode, and React.FunctionComponent all prove to be inadequate in this

Having an issue with assigning a type to my prop SubmissionComponent. This prop is expecting JSX, possibly a button or a more complex structure. For example: const SubmissionComponent = <p>hi</p>; which is then used like this: <Submitter ...

Understanding and parsing JSON with object pointers

Is it possible to deserialize a JSON in typescript that contains references to objects already existing within it? For instance, consider a scenario where there is a grandparent "Papa" connected to two parents "Dad" and "Mom", who have two children togeth ...

Tips for converting JSON String data to JSON Number data

Hello everyone, I am facing an issue with converting the 'review' value from String to a numerical format in JSON. This is causing problems when trying to perform calculations, leading to incorrect results. The scenario involves saving user comm ...

Issue with rendering of material icon

I'm having trouble properly rendering a material icon in my project. I've installed it correctly, but it's not showing up in the browser. Here are the steps I followed: npm install material-design-icons In my .angular-cli.json file, I mad ...

What is the best way to showcase a component using FlatList?

Discovering the power of React Native combined with TypeScript and Redux Toolkit Hello! I'm currently facing an issue with rendering a list of messages using FlatList. Everything renders perfectly fine with ScrollView, but now I need to implement inf ...

Having trouble launching the freshly developed Angular app

I'm encountering an issue with my newly created app - I can't seem to launch it. Error: The loader “C:/C#/Angular/my-app/src/app/app.component.css” is not providing a string as expected. https://i.sstatic.net/6Xjwd.png https://i.sstatic.ne ...

The Power of Asynchronous Programming with Node.js and Typescript's Async

I need to obtain an authentication token from an API and then save that token for use in future API calls. This code snippet is used to fetch the token: const getToken = async (): Promise<string | void> => { const response = await fetch(&apos ...

Pass information from a child component to a parent component within a React.js application

Using the Semantic-UI CSS Framework, I have implemented a dropdown menu and want to be able to select an item from it and identify which item has been selected. While I can determine the selected item within the child component and set its state, I am faci ...

Using Ionic2, include NavController into Injectable Service

Having an issue with an Injectable Service in Angular2 with Ionic2 framework. Here is how my service is structured: import {Injectable} from '@angular/core'; import {NavController} from 'ionic-angular'; @Injectable() export class Vie ...