docs-bug(COMPONENT): Absolute the worst guide I have read the last couple of years! Here are some of the things that you need to fix!

[eSkaarAS]

Documentation Feedback

You have so many outdated and or simply gross over simplified examples. There is no way to understand how to override basic properties of the system. I am wondering how to change the default border-radius of the buttons or any other component. Well, it is not listed in the docs, or if it is, it is not in the button docs and it is not in the general theming docs.

E. g. for outdated example:
https://material.angular.io/components/sidenav/examples <-- last example is outdated

• For instance the sidebar example is not using afterNextRender, so you get an window not defined SSR bug

Affected documentation page

https://material.angular.io/components/sidenav/examples

[frixou89]

I agree that the docs could be a little better. However, I will assume you are copying the shouldRun variable in your code for you to get a window not defined error since nothing else uses the browser APIs directly like that.

That is just a "check" the examples are using to make them work with Stackblitz . You shouldn't copy those parts on your project.

[eSkaarAS]

You are right. I mistyped. The window not defined bug is from the shouldRun variable. After removing the shouldRun we still have errors because of SSR, because the app tries to fetch the document object from the browser on the server. Still, my point stands, this is an awful example. And theres no way to understand HOW you customize the design of the sidebar, The corners are rounded, well HOW do you fix that, i dont want rounded corners for my sidebar, the styling says nothing about it, thus making it impossible to find the right css for it.

Errors after removing shouldRun;

• [1] ERROR TypeError: this._mobileQuery.addEventListener is not a function
• [1] [vite] Internal server error: this._mobileQuery.addEventListener is not a function

I am pretty sure the errors are because of SSR/hydration, _mobileQuery.addEventListener needs the document browser object to work which cant be accessed at the server

I have fixed it, so the problem i am having is not that the problem is unsolvable. The problem is that the example is wrong. And that the docs are horrible. I am sorry. The docs are insanely bad. And i want them to be improved. This is simply subpar for a company/framework/ui library this big.

export class DemoSidebar implements OnDestroy {
  protected isMobile = signal(true);
  protected routePaths = routePaths;  // <-- Ignore this line, just global routes object for the application

  mobileQuery: MediaQueryList | undefined;
  mobileQueryListener: (() => void) | undefined;

  constructor() {
    const media = inject(MediaMatcher);

    afterNextRender(() => {
      this.mobileQuery = media.matchMedia('(max-width: 600px)');
      this.isMobile.set(this.mobileQuery.matches);
      this.mobileQueryListener = () => {
        if (!this.mobileQuery) return;
        this.isMobile.set(this.mobileQuery.matches);
      };
      this.mobileQuery.addEventListener('change', this.mobileQueryListener);
    });
  }

  ngOnDestroy(): void {
    if (!this.mobileQuery || !this.mobileQueryListener) return;
    this.mobileQuery.removeEventListener('change', this.mobileQueryListener);
  }
}

[wagnermaciel]

I am wondering how to change the default border-radius of the buttons or any other component. Well, it is not listed in the docs, or if it is, it is not in the button docs and it is not in the general theming docs.

@eSkaarAS Is this what you were looking for? This page shows how to override button styles.
https://material.angular.io/components/button/styling

[mgechev]

eSkaarAS I want to give you a warning that all conversations here must follow the Angular code of conduct.

If your messages are not in alignment with it, we'll take actions accordingly.