Topic: Not able to view the page for ToDo application
sourav suman asked 6 years ago
Hi
Link : Todo list app lesson 4 Hhtml and css - Angular
I have been going through the tutorials of Angular. I am confused where to use the below code.
You write "Replace default MDB placeholder". i didn't get this line. can you elaborate it
<div class="container">
<div class="row mt-5">
<div class="col-md-12 text-center">
<h1 class="h1-responsive">MDB Todo App:</h1>
</div>
</div>
<div class="row mt-5 ">
<div class="col-md-3 offset-md-2 left-column mb-1">
<ul class="list-group">
<li *ngFor="let category of categories" class="list-group-item d-flex justify-content-between align-items-center" (click)="onSelect(category)">
{{category.name}}
<span class="badge primary-color badge-pill">{{countTodosByCat(
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<form>
<input mdbActive type="text" placeholder="Add new category" id="form1" class="form-control" [(ngModel)]="newCategory.name"
(keyup.enter)="addCategory()" name="addCat">
</form>
<span class="badge primary-color badge-pill">
<a class="prefix">
<i class="fa fa-plus" aria-hidden="true" (click)="addCategory()"></i>
</a>
</span>
</li>
</ul>
</div>
<div class="col-md-5 list mb-1" *ngIf="selectedCategory; else elseBlock">
<div class="row px-3 py-3">
<div class="col-md-12">
<h4>{{selectedCategory.name}}<
</div>
</div>
<div class="row px-4 mt-3">
<div class="form-group full-width" *ngIf="todosForCat.length > 0">
<form class="full-width">
<div *ngFor="let todo of todosForCat">
<input type="checkbox" id="{{todo.id}}" (click)="toggleTodoComplete(
<label for="{{todo.id}}" [ngClass]="{'strikethrough' : todo.complete}">{{todo.title}}
<button type="button" class="close" aria-label="Close" style="float: right;" (click)="removeTodo(todo)">
<span aria-hidden="true" >×</span>
</button>
</div>
</form>
</div>
</div>
<div class="row px-4 mt-1">
<div class="md-form">
<form>
<a class="prefix">
<i class="fa fa-plus prefix" (click)="addTodo()"></i>
</a>
<input mdbActive type="text" id="form2" class="form-control" [(ngModel)]="newTodo.title" (keyup.enter)="addTodo()" name="addNew">
<label for="form2">Add new task</label>
</form>
</div>
</div>
</div>
<ng-template #elseBlock>
<div class="col-md-5 test 5 list text-center">
<h5 class="pt-3">Choose category from menu in the left.</h5>
<p class="pt-5">You can also create a new category by typing the name and pressing the enter or clicking on the
<span class="badge primary-color badge-pill">
<i class="fa fa-plus" aria-hidden="true"></i>
</span>
button.
</p>
</div>
</ng-template>
</div>
</div>
Arkadiusz Idzikowski staff answered 6 years ago
Dear sourav suman,
You need to remove default content from app.component.html file and replace it with the code from the second point starting with '<div class="container">'. Please let me know if you encounter any further problems.
Regards,
Arek
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 7.0.0
- Device: Computer
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: Yes