Call TypeScript function in HTML without a click event

Question

I know how to call a TypeScript when clicking a button, but how do you call a function without that type of event? I would like to call a function when I have an array called chartData populated. This is what I have:

        <div *ngIf="chartData.length">
            chartMethod();
        </div>

But instead of chartMethod() being called, it just prints 'chartMethod()' on the html page.

I've also tried:

            <script> 
                chartTest();
            </script>

but the function was still not called.

Answer 1

It happens because this chartTest() is incapsulated by Angular and is not accessible outside Angular. But inside angular you can, you just need to:

<div *ngIf="chartData.length">
    {{chartMethod()}}
</div>

But it will add an undefined in html so just test

<div *ngIf="chartData.length">
    {{chartMethod() ? chartMethod() : ""}}
</div>

But I don't think it's html resposibillity call any method, it needs to be done by the component itself in typescript.