app-root. Open the file
src/app/app.component.ts. Add the list of items inside the
AppComponentclass as an array of objects for each item. At this stage, each item only contains a title:
Putting info (resources) right inside your code is called hardcoding and is considered an especially bad practice. Eventually we'll get the list from an external source, but even if not, it's best to place mock data in their own files. But let's advance step-by-step, so defining items this way is okay for now.
*ngFor. It works like an enhanced loop in Java. The
*notation causes Angular to use the current element as a template when rendering the list.
todoList, each item is assigned to the template variable
todoItem, and we can use this variable inside the element in which we define it (in this case the
lielement) and its children.
ngFordirective modifies the template at runtime by repeating the element it's called on and its content. Another directive, for example, is
ngIf, which receives a Boolean expression. Angular will only render the element and its content if the expression is true. It also needs the
*prefix because it uses the target element as a template, similar to the
*ngFordirective. For example:
userLoggedInshould be a member of the component, and have a true or false value. If it's true, the
h1element will be displayed. If false, the element will not exist in the DOM.
*). For example
ngClass, with which you can dynamically apply style and classes to the element.