Not able to view the page for ToDo application


Topic: Not able to view the page for ToDo application

sourav suman asked 3 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(category.id)}}</span>
        </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}}</h4>
        </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(todo)" [checked]="todo.complete">
              <label for="{{todo.id}}" [ngClass]="{'strikethrough' : todo.complete}">{{todo.title}}</label>
              <button type="button" class="close" aria-label="Close" style="float: right;" (click)="removeTodo(todo)">
                <span aria-hidden="true" >&times;</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 3 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


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • 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
Tags