How hide element with url get parameter?

Question

I have an application written in Angular 13 using Typescript.

I want to hide items with get url parameters and set it to true if it doesn't exist.

export class AppComponent {

  menu: boolean = true;

  constructor(private oauthService: InitialAuthService, private userRoleService: UserRoleService, private route: ActivatedRoute,) {
  }

  ngOnInit(): void {

    this.route.queryParams
      .subscribe((params: any) => {

        this.menu = !!params["menu"] ? params["menu"] : true

      }
    );
    this.menu = this.route.snapshot.queryParams['menu'];

I simply want to cache HTML element following parameters obtained in URL.

For example

http://localhost:4200/index?menu=false   // hide menu 
http://localhost:4200/index?menu=true    // show menu 
http://localhost:4200/index              // show menu

html side

<div *ngIf="menu">...</div>

Can you clarify the problem? What exactly is not working as you expect? — OctavianM
– OctavianM, Commented Jan 16, 2023 at 15:47
Please provide more information. Is something not working as expected, or what's the problem? — Sven Märki
– Sven Märki, Commented Jan 16, 2023 at 15:47
Does this answer your question? Angular query params as boolean type, not string — Andrew Allen
– Andrew Allen, Commented Jan 16, 2023 at 16:19

Denis R · Accepted Answer · 2023-01-16 18:25:27Z

1

Try this one:

export class AppComponent implements OnInit {

  isShown$!: Observable<boolean>;

  constructor(private _route: ActivatedRoute) {}

  ngOnInit(): void {
    this._handleRouteQueryParams();    
  }

  private _handleRouteQueryParams(): void {
    this.isShown$ = this.route
      .queryParamMap
      .pipe(map(params => {
        return !params.has('menu') || params.get('menu') === 'true';
    }));
  }
}

In the template

<div *ngIf="isShown$ | async">...</div>

answered Jan 16, 2023 at 18:25

Denis R

2762 silver badges3 bronze badges

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

1 Comment

Jack Boch Over a year ago

think it's work

Collectives™ on Stack Overflow

How hide element with url get parameter?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related