Angular routing to open the expansion panel-CodePudding

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!

CodePudding user response：

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

CodePudding user response：

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 >
      <label >
          <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  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