docs: add matrix parameters docs and examples#64459
docs: add matrix parameters docs and examples#64459SkyZeroZx wants to merge 1 commit intoangular:mainfrom
Conversation
| You can access matrix parameters through `route.params`, the same observable used for route parameters: | ||
|
|
||
| ```ts | ||
| import { Component, inject } from '@angular/core'; | ||
| import { ActivatedRoute } from '@angular/router'; | ||
|
|
||
| @Component(/* ... */) | ||
| export class SalesAwesome { | ||
| private route = inject(ActivatedRoute); | ||
|
|
||
| constructor() { | ||
| // Access matrix parameters via params | ||
| this.route.params.subscribe((params) => { | ||
| const openModal = params['openModal']; | ||
| if (openModal === 'true') { | ||
| // Open modal logic | ||
| } | ||
| }); | ||
| } | ||
| } | ||
| ``` |
There was a problem hiding this comment.
This probably isn't the best example and give the false impression that's the only why access their value.
Matrix params are present in any route object and they're also binded to inputs when you have withComponentInputBinding()
SkyZeroZx
force-pushed
the
docs/router-params
branch
from
07d8594 to
1d54531
Compare
| | **Syntax** | `;key=value` | `?key=value` | | ||
| | **Multiple values** | `;key=val1;key=val2` | `?key=val1&key=val2` | | ||
| | **Access method** | `route.params` or `input` | `route.queryParams` | | ||
| | **Requires definition** | No | No | |
There was a problem hiding this comment.
| | **Requires definition** | No | No | |
I think this is kind of confusing. Better to just omit it
| | Feature | Matrix Parameters | Query Parameters | | ||
| | :---------------------- | :------------------------ | :------------------- | | ||
| | **Syntax** | `;key=value` | `?key=value` | | ||
| | **Multiple values** | `;key=val1;key=val2` | `?key=val1&key=val2` | |
There was a problem hiding this comment.
| | **Multiple values** | `;key=val1;key=val2` | `?key=val1&key=val2` | |
Is this necessary to mention? While true, I don't think this information is super relevant to almost anyone. Also, this really depends on the UrlSerializer, which may be configured to handle multiple values differently
|
|
||
| NOTE: Component input binding requires configuring the router with `withComponentInputBinding` in your router configuration. | ||
|
|
||
| **Key differences between matrix and query parameters:** |
There was a problem hiding this comment.
I'm not sure this section is at all necessary. It's all covered above in the example as well as the setup description:
this.router.navigate(['/awesome-products', { view: 'grid', filter: 'new' }]);
// Results in URL: /awesome-products;view=grid;filter=new
There was a problem hiding this comment.
Updated, removed the section, I agree it seems somewhat redundant with the examples previously provided.
SkyZeroZx
force-pushed
the
docs/router-params
branch
from
1d54531 to
82a753b
Compare
| **Using component input binding** | ||
|
|
||
| ```ts | ||
| import { Component, Input } from '@angular/core'; | ||
|
|
||
| @Component(/* ... */) | ||
| export class AwesomeProducts { | ||
| view = input.required<string>() // Automatically bound to matrix parameter | ||
| filter = input.required<string>() | ||
| } | ||
| ``` | ||
|
|
There was a problem hiding this comment.
Rather than writing this as an example, maybe just make a quick mention of withComponentInputBinding with something like "Matrix parameters are also bound to inputs when using the withComponentInputBinding feature"
There was a problem hiding this comment.
What do you think of this way to replace the example with a note?
NOTE: Matrix parameters are also bound to component inputs when using the withComponentInputBinding feature.
There was a problem hiding this comment.
Yea, that works. Maybe start with "Alternatively, ..." or "As an alternative to using ActivatedRoute, ..."
SkyZeroZx
force-pushed
the
docs/router-params
branch
from
82a753b to
b16a591
Compare
JeanMeche
added
action: merge
thePunderWoman
force-pushed
the
docs/router-params
branch
from
b16a591 to
bdf7ffa
Compare
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
4 participants
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Issue Number: #64451
What is the new behavior?
Does this PR introduce a breaking change?
Other information