How to invoke routed component in template in angular

Hao

Angular 7, I have a component which responds to a route like this

export class MyComponent implements OnInit {

ngOnInit() {
    this.route.paramMap.pipe(
            switchMap((params: ParamMap) => {
                return this.myService.get(+params.get('id'));
            })
        )
            .subscribe( ...

Now in another component template, I want to invoke this component directly in the template, how do I do that?

<app-my></app-my>

How do I provide the routing parameter id ?

Igor

Just use/add @Input and use standard property binding.

MyComponent.ts

export class MyComponent implements OnInit {

    @Input()
    id: string;

    ngOnInit() {
        if(!this.id)
        {
          this.route.paramMap.pipe(
                switchMap((params: ParamMap) => {
                    return this.myService.get(+params.get('id'));
                })
            )
                .subscribe( ...

root-component.ts

<app-my [id]="'some value'"></app-my>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

How to read data passed in routed url in component angular

From Dev

How to modify state of a component from a routed component?

From Dev

How to invoke angular component tests from protractor?

From Dev

Passing data into a routed component with Angular2

From Dev

Apply class to every routed component in Angular

From Dev

How to invoke method from one component to another component in Angular 2?

From Dev

Update parent component title from routed child component in Angular 2

From Dev

How to invoke a method of one component from the other [Angular]

From Dev

Angular BehaviorSubject always null with .getValue or .subscribe from different routed component

From Dev

How to render a hyperlink in a component template in Angular 6?

From Dev

How to make a component with a runtime template in Angular?

From Dev

How to add in Angular a template in the Root Component?

From Dev

How to switch component in angular 5 like template?

From Dev

How to get html template of an Angular 2 Component?

From Dev

How to unit test an Angular 1.5 Component template?

From Dev

How to use Spread Operator in angular component template

From Dev

How to correctly refresh template of component in Angular?

From Dev

How to invoke a lambda template?

From Dev

How to refresh template of component by changing variable in other component Angular 13

From Dev

How to send data from one routed component to another

From Dev

Angular 2 Template Component

From Dev

Angular Component Template Size

From Dev

Angular component is missing a template

From Dev

Angular component template inheritance

From Dev

Angular component not changing template

From Dev

How to invoke a function in parent component from nested child component in Angular 1x

From Dev

Angular: call a function of component A when the state of the routed component B has been changed

From Dev

How to invoke a component on handleSubmit in react

From Dev

How to invoke a function of vue component?

Related Related

  1. 1

    How to read data passed in routed url in component angular

  2. 2

    How to modify state of a component from a routed component?

  3. 3

    How to invoke angular component tests from protractor?

  4. 4

    Passing data into a routed component with Angular2

  5. 5

    Apply class to every routed component in Angular

  6. 6

    How to invoke method from one component to another component in Angular 2?

  7. 7

    Update parent component title from routed child component in Angular 2

  8. 8

    How to invoke a method of one component from the other [Angular]

  9. 9

    Angular BehaviorSubject always null with .getValue or .subscribe from different routed component

  10. 10

    How to render a hyperlink in a component template in Angular 6?

  11. 11

    How to make a component with a runtime template in Angular?

  12. 12

    How to add in Angular a template in the Root Component?

  13. 13

    How to switch component in angular 5 like template?

  14. 14

    How to get html template of an Angular 2 Component?

  15. 15

    How to unit test an Angular 1.5 Component template?

  16. 16

    How to use Spread Operator in angular component template

  17. 17

    How to correctly refresh template of component in Angular?

  18. 18

    How to invoke a lambda template?

  19. 19

    How to refresh template of component by changing variable in other component Angular 13

  20. 20

    How to send data from one routed component to another

  21. 21

    Angular 2 Template Component

  22. 22

    Angular Component Template Size

  23. 23

    Angular component is missing a template

  24. 24

    Angular component template inheritance

  25. 25

    Angular component not changing template

  26. 26

    How to invoke a function in parent component from nested child component in Angular 1x

  27. 27

    Angular: call a function of component A when the state of the routed component B has been changed

  28. 28

    How to invoke a component on handleSubmit in react

  29. 29

    How to invoke a function of vue component?

HotTag

Archive