Angular 7: load html page from assets folder within component?

Question

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?

A. Seif · Accepted Answer · 2020-07-12 18:13:10Z

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.

edited Jul 12, 2020 at 18:13

answered Feb 20, 2019 at 10:22

A. Seif

114 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 7: load html page from assets folder within component?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related