Setting different component template according to condition Angular

Question

I created a component and I need to have two different templates depending on some condition. For example, I have a "testApp" component and if condition is true, the parent tag needs to be an anchor tag, otherwise parent tag has to be a div. The html content inside the parent container will be the same inside both templates. I am trying to figure out a way to do this, but I cannot find how and where to write the condition to choose the template.

angular.module('testApp').component('testCard', { 
templateUrl: 'testCard', // inlined template 
controller: [TestCardController]
});

<script type="text/ng-template" id="testCard">
  <div class="test-card">
    // same content 
  </div>
</script>

<script type="text/ng-template" id="testCard">
  <a class="test-card">
  // same content
 </a>
</script>

Why does the template itself need to be different? Why can't you have a wrapper and use `ng-if`? — Explosion Pills, Dec 05 '17 at 21:44
Is this question about angular or angularjs? Please remove the irrelevant tag. — YakovL, Dec 05 '17 at 21:46
@ExplosionPills Can you please elaborate? I only started learning angular js recently.... — coffeeak, Dec 05 '17 at 21:52

score 0 · Answer 1 · answered Dec 05 '17 at 21:53

0

You should be able to supply a function for templateUrl instead of a string. See More than one template in same component in AngularJS 1.5

answered Dec 05 '17 at 21:53

smjhunt

311
4
8

Setting different component template according to condition Angular

1 Answers1