How to call an AngularJS Function inside HTML ? Last Updated : 28 Apr, 2025 Summarize Comments Improve Suggest changes Share Like Article Like Report 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 appnameProject 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()}} JavaScript // 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!!") } } JavaScript // 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 { } Output: Example 2: In this example, we will see that we can pass arguments in the function, and the result will be returned by the function on the front page. HTML <!-- app.component.html --> <h2 style="color: green"> GeeksforGeeks </h2> <h2> How to Call an AngularJS function inside HTML </h2> <h3 style="color:crimson"> {{displayMessage("Hi GeeksforGeeks!! Happy Learning Angular!!")}} </h3> <h3 style="color: darkorange;"> Sum of 2 and 3 is : {{getSum(2,3)}} </h3> JavaScript // 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(msg: string) { return msg; } getSum(a: number, b: number) { return a + b } } JavaScript // 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 { } Output: Comment More infoAdvertise with us Next Article How to execute AngularJS controller function on page load ? N nikitamehrotra99 Follow Improve Article Tags : Web Technologies AngularJS AngularJS-Questions Similar Reads How to make an http call in angular Angular, with its robust framework and extensive ecosystem, offers you powerful tools for building modern web applications. One such tool is the HttpClient module, which provides a seamless way to make HTTP calls and interact with RESTful APIs or backend services. In this article, we'll explore maki 3 min read How to call JavaScript function in HTML ? In HTML, you can easily call JavaScript functions using event attributes like onclick and onload. Just reference the function name within these attributes to trigger it. You can also call functions directly within script blocks using standard JavaScript syntax. Let's create an HTML structure with so 2 min read How to call a function on click event in Angular2 ? A Function is a set of statements that takes input, does some specific computation, and produces output. An on click event occurs when the user clicks on an element. In this article, we will see How to call a function on click event in Angular2, along with understanding the basic implementation thro 3 min read How to execute AngularJS controller function on page load ? In this article, we will see how to execute/call a JS function on page load using AngularJS. This function can be used to perform initialization. Calling a function or initializing a single value on page load in AngularJS is quite easy. AngularJS provides us with a dedicated directive for this speci 2 min read How to insert HTML into view from AngularJS controller? The ng-bind-html directive is a secure way of binding content to an HTML element. So in order to insert HTML into view, we use the respective directive. While using AngularJS, write HTML in our corresponding application, we should check the HTML for dangerous or error prone code. By including the "a 2 min read How to access the Scope from outside JS Function in AngularJS ? In the AngularJS application, we generally need to access the scope from the outside JS function. This can be done using the global scope object like $rootScope or the AngularJS services. Accessing the scope from the outside of JS functions is to enable the manipulation of data in the scope of the a 4 min read Like