Angular load data based on query string using same component

Question

I was wondering if it was possible to load in data based on query string, for example if the user its the following link http://localhost:4200/earning/customers?type=archived this will load in data using the same component i.e. CustomersComponent and if the user hits http://localhost:4200/earning/customers with the query param it will load the data from the same component.

my component looks like this

@Component({
  selector: 'app-customers',
  templateUrl: './customers.component.html',
  styleUrls: ['./customers.component.css']
})
export class CustomersComponent implements OnInit {


  public customers: Customer[] = [];
  public archivedCustomers: Customer[] = [];

  public type;
  public archived:boolean = false;


  constructor(private customerService: CustomerService,
              private dialog: MdDialog,
              private addressBookService:AddressBookService,
              private activeRoute: ActivatedRoute,
              private route:Router) {

    this.type = this.activeRoute.snapshot.queryParams["type"];

  }



  openDialog() {
    this.dialog.open(NewCustomerComponent);
  }
  ngOnInit() {
    this.getCustomersList();
    if(this.type != null || this.type == "archived"){
      this.archived = true;

    }
  }

  getCustomersList(){
    this.customerService.getCustomerList()
      .subscribe(
        (res) => {
          this.customers = res;
          if(this.archived){
            this.customers.forEach((c)=>{
              if(!c.active){
                this.archivedCustomers.push(c);
              }
            });
          }
        },
        error => {
          console.log(<any>error);
        }
      );
  }

}

here is what is in my template

<header>
  <h4><a routerLink="/earning">Earning</a></h4>
  <h1><strong><i class="earning"></i> Customers</strong></h1>
</header>
<article>
  <ul>

  </ul>
  <table class="customers" *ngIf="customers || archived">
    <thead>
    <tr>
      <th class="heading">Company</th>
      <th class="heading">Contact</th>
      <th nowrap>They Owe You</th>
      <th width="1%"> </th>
    </tr>
    </thead>
    <tbody *ngIf="!archived">
      <tr *ngFor="let customer of customers">
        <td class="heading">
          <a [routerLink]="['/earning/customers/sales',customer.id]">{{customer.customer_name}}</a>
        </td>
        <td class="sub-heading" nowrap><a class="tooltipped" data-position="top" data-delay="50" data-tooltip="@customer.getCompanyName is a customer">First name Last Name</a></td>
        <td nowrap>total balance due</td>
        <td nowrap class="extras">
          <button md-icon-button [mdMenuTriggerFor]="menu">
            <md-icon>more_vert</md-icon>
          </button>
          <md-menu #menu="mdMenu">
            <button md-menu-item [routerLink]="['/earning/customers/invoice/new',customer.id]">
              <span>Create Invoice</span>
            </button>
            <button md-menu-item>
              <span>Add Payment</span>
            </button>
            <md-divider></md-divider>
            <button md-menu-item [routerLink]="['/earning/customers/sales', customer.id]">
              <span>View Sales</span>
            </button>
            <button md-menu-item [routerLink]="['/earning/customers/profile',customer.id]">
              <span>View Profile</span>
            </button>
            <button md-menu-item>
              <span>Email Statement</span>
            </button>
          </md-menu>
        </td>
      </tr>
    </tbody>

  </table>

  <div class="plus-button"><a href="javascript:void(0)" (click)="openDialog();"><i class="material-icons">add_circle</i> Customer</a></div>
</article>

This is what I have in my routes

{
    path: 'earning',
    canActivate: [AuthGuard],
    children: [
      {
        path: '',
        canActivateChild: [AuthGuard],
        children:[
          { path: 'earning', pathMatch: 'full',  component: CustomersComponent },

          { path: 'customers', component: CustomersComponent},

        ]
      }
    ]
  },

and here is my route link

  <li><a routerLink="/earning/customers" class="ripple-surface" (click)="color='#00c853'">All Customers <em>32</em></a></li>
   <li><a [routerLink]="['/earning/customers']" [queryParams]="{type: 'archived'}" class="ripple-surface" (click)="color='#00c853'">Archived <em>3</em></a></li>

Thanks in advance

DeborahK · Accepted Answer · 2017-04-11 19:26:45Z

2

Yes, it is possible. Instead of accessing the parameters from the snapshot like you have here:

 this.type = this.activeRoute.snapshot.queryParams["type"];

You need to use the queryParams observable, something like this:

this.activeRoute.queryParams.subscribe(params => {
    this.type = params['type']
}

You can find a complete walk through of defining/reading parameters here: https://app.pluralsight.com/player?course=angular-routing&author=deborah-kurata&name=angular-routing-m4&clip=0&mode=live

answered Apr 11, 2017 at 19:26

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Limpep Over a year ago

Thanks, this is what I was looking for. By the way I've seen some of your videos you are doing great work.

DeborahK Over a year ago

Thank you so much!

Collectives™ on Stack Overflow

Angular load data based on query string using same component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related