Angular routing to open the expansion panel

Question

First off I'm new to Angular, only been learning it for about a month so I just have a quick question that I can't seem to find anything on. So I'm trying to use a routerLink to go from one page to another, but also I want that page to open an expansion panel once it has landed on the desired page. My expansion panels aren't labeled in any way that would show up in the console, it just has the basic information. Would I have to create a method in order to open the tab once the routerLink is clicked?

Thanks in advance!

For a better explanation, I want to take the code from this stackBlitz page to explain. https://stackblitz.com/edit/angular-expansion-panel-with-route-transition-animation?file=app%2Fno-panel%2Fno-panel.component.html Let's say you change the no-panel.html code to no panel works it will take you to the panel page. All I'm trying to do is get one of the panels to automatically be opened/expanded once on the page without having to click on the panel. I'm just not sure how to do it or if routerLink can do it by itself or if I have to add a method. — DrowsyKing, Feb 10 '22 at 20:00
from what I have seen and from what you want to accomplish. First start over the angular adding from the start with the command --routing, from then you can orderly use router instead of declaring somewhere — AbbathCL, Feb 11 '22 at 00:55
My problem isn't necessarily with the routing, all I want to do is when I click on a routerlink, I want the redirect to also expand a specific panel without having to be clicked on. Another example: Let's say I have 2 pages (1 and 2) page 2 has 4 closed panels, and page 1 has a redirect/routerLink to page 2. I want the redirect/routerLink on page 1 to go to page 2 and specifically open the 3rd panel without having to click on anything on page 2. I've been told to create a method using this.router.getCurrentNavigation() in order to do this, so I'm looking into that now. — DrowsyKing, Mar 17 '22 at 15:34

score 0 · Answer 1 · answered Feb 09 '22 at 20:21

When you create the project with nodeJS you have to add the attribute routing as ng new yourp_name --routing, if you don't do, you have to add the files manually. in the app-routing.module.ts you have a const routes, you have to add the path of your apps, for example if you have a HomePage, must be

const routes: Routes = [
  { path: "", redirectTo: "homepage", pathMatch: "full" },
  { path: "homepage", component: HomePageComponent }
];

when you add it, it will create in all places automatically.

After it you can reference it in your apps as a routerlink with the path name you gave it, e.g

<a routerLink="/homepage"></a>

Hope it works

score 0 · Answer 2 · answered Feb 09 '22 at 20:24

First of all don't worry if you are new to Angular, we all start from scratch. If you want to open an expansion panel try to use this and see if it works for you.

In your .ts file:

openExpansionPanel: boolean = false;

toggleExpansionPanel(checked: boolean) {
    this.openExpansionPanel = checked;
}

In your .html file:

<div class="form-group">
      <label class="switch">
          <input 
            type="checkbox" 
            [value]="false"
            [ngModel]="openExpansionPanel"
            (ngModelChange)="toggleExpansionPanel($event)"
            data-toggle="collapse" 
            href="#collapseFilters" 
            aria-expanded="false" 
            aria-controls="collapseFilters">
          <label>Expand Panel</label>
    </div>

    <!-- Your panel expands here -->
    <div class="collapse" id="collapseFilters">
    </div>

Everything inside the div with the id collapseFilters will expand or collapse when you click the checkbox. Let me know if it was useful to you

I think I'm a little lost on where to put it. I have 2 different components, Component A and Component B. In Component A.html I want Component A to be able to click on the checkbox/link just how when one is to use link to go to component B's page it takes you to component B's page. But when I get transferred to Component B's page, I want a specific panel on Component B's page (which I don't have an id for because I didn't know you could put id's on panels) to be open. So do I put the.html and .ts code on Component B? — DrowsyKing, Feb 10 '22 at 19:31

Angular routing to open the expansion panel

2 Answers2