How to call an AngularJS Function inside HTML ?
Last Updated :
24 Apr, 2025
A Function is a set of statements that takes input, does some specific computation, and produces output. In this article, we will learn How to Call an AngularJS function inside HTML. To achieve this, we can use {{...}} to call the function from HTML. We can also pass arguments and return the result back to HTML.
Steps for Installing & Configuring the Angular Application
Step 1: Create an Angular application using the following command.
ng new appname
Step 2: After creating your project folder i.e. appname, move to it using the following command.
cd appname
Project Structure
It will look like the following:
Example 1: In this example, we will call a function from HTML. This function is written in the ts file. We will call an alert() from this function.
HTML
<!-- app.component.html -->
<h2 style="color: green">
GeeksforGeeks
</h2>
<h2>
How to Call an AngularJS function inside HTML
</h2>
<h3>Open your console</h3>
{{displayMessage()}}
// app.component.ts
import { Component, OnInit } from '@angular/core';
import { KeyValue } from '@angular/common';
import { Pipe, PipeTransform } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: "./app.component.html",
styleUrls: ['./app.component.css']
})
export class AppComponent {
displayMessage() {
console.log(
"Hi GeeksforGeeks!! Happy Learning Angular!!")
}
}
// app.module.ts
import { NgModule }
from '@angular/core';
import { BrowserModule }
from '@angular/platform-browser';
import { HttpClientModule }
from '@angular/common/http';
import { AppComponent }
from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }