Set the disable property to true to disable a button in Angular <button [disable]=”true” …></button> Set the disable property to false to enable a button in Angular <button [disable]=”false” …></button> In this article, we’ll learn how to disable a button in Angular. We’ll create a simple To-Do List App with one component. The main requirements…
In this article, we’ll see six ways to hide a button in Angular. We will create a simple to-do list app with only one component(App Component). It will contain an input element and a hidden button. The button will be shown if the user types an item in the input field. When the user clicks…
In this example, we will learn how to implement a button click in Angular. We’ll create a simple chores list app with only one component(App Component). It will contain a select element providing a menu of options (all chores) and a button. If the user selects an option and clicks the button, the selected option…
ngOnChanges is a method in a component’s class (or directive) executed whenever a change occurs in an @Input property of the class. In this ngOnChanges example, we’ll learn how to use the ngOnchanges lifecycle hook in Angular. We’ll create a simple chores list app using only two components – a parent (App Component) and a…
In this tutorial, we will learn how to pass data from a child to a parent component. We will create a basic chore app. The child component will contain an input field and a button. When a user types a particular chore into the input field and clicks on the button, the data will be…
In the Parent Component‘s Class – Add a field (for example, parentProperty) that will store the data you want to pass to the child. In the Child Component’s Class – Add a property with the @Input() decorator (childProperty). In the Parent Component’s Template – Add the child component’s selector, which will “call” the component into…
A component is a class associated with an HTML template, a CSS selector, and CSS styles for the template representing a part of the screen. It is the main building block for Angular applications. Components compose the application interacting with each other.
The src folder contains all files related to our Angular app. The .gitignore file indicates which files should be ignored by git. The .browserslistrc contains configurations for target browsers. Angular.json contains configurations for the build process. Karma.conf.js contains configurations for unit testing. Package.json defines the required npm dependencies for the app. Tsconfig.app.json contains compiler options…