1

In my application component called Window, I need to show different HTML each time depending on values returned from service.

The different html files are maintained in assets folder. Example: - assets/guide1.html - assets/guide2.html - assets/guide3.html .... so on. and all these files have static content.

The service which we have for application returns the file name. The component will know the html file name and it should load html within its template. how can this be achieved?

  • Is it possible to create a component where the templateUrl can be an expression? Below is an example code from angularjs:

app.directive('headermenu', function() {
  return {
    restrict: 'E',
    scope: {
      userRole : '='
    },
    link: function($scope)
    {
      $scope.$watch('userRole', function(userRole)
      {
        if (userRole && userRole.length)
        {
            $scope.dynamicTemplateUrl = 'assets/common/headerMenu' + userRole + '.html';
        }
      });
    },

    template: '<ng-include src="dynamicTemplateUrl"></ng-include>'
  };
});

same code from this link: plunker

  • Does ng-include load the html from assets folder? How can this be achieved with Angular 7?
user2439903
  • 1,277
  • 2
  • 34
  • 68

1 Answers1

1

You can load the file using HttpClient by injecting it in the service's constructor then try this

let path = 'assets/' + {fileName} + '.html';
this._httpClient.get(path, {responseType: "text"}).subscribe(
data => {
//now you have the file content in 'data'
});

for binding from service to html, you can refer to this question.

A. Seif
  • 11
  • 4