How To Dynamically Set The Contents of an HTML Element?


#1

I am new to Ionic and Ionic Creator. I’ve followed tutorials on the site, but I’m running into an issue.

I wrote an API to retrieve data from a database, but I can’t figure out how to format it. It is basically sports scores or a schedule. A component like a list won’t work because I need more control of the formatting - 2 sports teams stacked on the left, and then 2 scores stacked on the right. Pretty basic format.

I figured an HTML component would work. I could just format the data when I retrieved it and then plug it in to the HTML component. Then use CSS and the grid system to make everything look the way I want. My issue is it seems there’s no way to name an HTML component or even set an Angular directive so you can do this. Am I missing something?

Any help will be appreciated. Thanks !


#2

See:


#3

@robinyo - thanks for the info, but the grid part isn’t where I’m really having the problem.

The main issue is how to get the data, that I’ve retrieved via API, into an HTML element - especially in Creator.


#4

.html:

<p>My current hero is {{currentHero.name}}</p>

.ts:

this.currentHero.name = 'Ironman';

See: https://angular.io/guide/template-syntax


#5

Nice! Thanks!

One more issue. I’m 90% there. I’m trying to set/change variables in a template (see below) and it just doesn’t seem to work.

What I’m trying to do is loop through the scores objects and if the date from a score is different than the one before it, have it print out a row with the date.

So, I want to set the newdate variable to true if currdate is not equal to the current score’s date and false otherwise.

Then at the end of the loop, set currdate equal the the score’s date. It seems like that happens immediately though even though it’s at the end of the “loop.” I have a feeling it doesn’t work like a traditional loop in another programming language. What is the right way to do something like this then?

Thank you for all your help!


<div class="score" ng-repeat="score in scores">
    {{newdate = (currdate != score.thedate) ? true : false;""}}
    <div class="row"  ng-if="newdate">
        <div class="col">
            <b>{{score.thedate}}</b> {{currdate}}
        </div>
    </div>
    <div class="row">
        <div class="col col-75">{{score.name}}</div>
        <div class="col col-25">{{score.score}}</div>
    </div>
    <div class="row">
        <div class="col col-75">{{score.opponent}}</div>
        <div class="col col-25 align-self-center">{{score.score_opp}}</div>
    </div>
    {{currdate = score.thedate;""}}
</div>