How do I add the component to the templateUrl?

The template and templateUrl is interchangeable either this or that, and I already have a templateUrl declared with the template so how can I add another variable to it?

I already have one variable assigned to templateUrl so how can I add another?

@Component({
selector: 'selectorTest',
templateUrl: './detail-test.component.html', '<ng-conent></ng-content>'
})

I wanted to add simply after the comma, but I get the error that Property assigment expected. I also tried to add another templateUrl property but there can only be one.

CodePudding user response：

templateUrl is meant to recieve only a path argument, the path to a template file.

I would advise you to add the <ng-content></ng-content> into the file pointed by templateUrl.

CodePudding user response：

This is directly from Angular's Doc:

1 template: An inline template for an Angular component. If provided, do not supply a template file using templateUrl.

2 templateUrl: The relative path or absolute URL of a template file for an Angular component. If provided, do not supply an inline template using template.

This means that you can only use one or the other. You can't combine them.

In your case, you can do one of the following:

1. template example:

@Component({
  selector: 'app-example',
  template: `
             <h2> This is a template example. Below is the ng-content </h2>
             <ng-content></ng-content>
            `
})
export class ExampleComponent {

}

2. templateUrl example:

// example.component.ts

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent {

}

// example.component.html

<h2>This is a templateUrl example. Below is the ng-content</h2>
<ng-content></ng-content>