How to change view after deleting or adding in angular 5+?

Question

I am building weather app and i am using angular 5 as my frontend framework and local storage as my storage. I am saving city name from a input field to local storage. The main problem here is when i save city name i want to change my view i.e i want to hide input field and show city name which i have saved earlier. And next function i have is remove city name from the local storage. In this case also i want to change my view i.e i want to hide city name and show input field. Here is my code

settings.component.html

<div class="row">
  <div class="col-md-6 col-xl-8 mt-4 col-center">
    <div class="card">
      <div class="card-body">
        <h3 class="text-center pt-2 pb-2">Setttings</h3>
        <hr>
        <div class="setting-menu">
          <span class="setting-items">
            <h5>Add Your City</h5>
          </span>
          <div *ngIf="storedCity" class="localstorage" #cityDiv>
            <div class="storedCity">
              <span> {{storedCity | uppercase}} </span>
            </div>
            <div class="remove-city mt-4">
              <span class="remove-icon ml-5">
                <i class="fa fa-times" aria-hidden="true" (click)="removeCity()" ></i>
              </span>
            </div>
          </div>

          <div class="clearfix"></div>
          <div *ngIf="!storedCity" class="city-input pt-4" #inputDiv>
            <form action="">
              <div class="form-group">
                <input type="text" [(ngModel)]="cityName" name="cityName" value={{cityName}} id="cityName" class="form-control" placeholder="Add City ......">
              </div>
              <div class="form-group">
                <button class="btn btn-success add-btn" (click)="update()">Add</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

settings.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';

@Component({
  selector: 'app-settings',
  templateUrl: './settings.component.html',
  styleUrls: ['./settings.component.scss']
})
export class SettingsComponent implements OnInit {

  @ViewChild('cityDiv') cityDiv;
  @ViewChild('inputDiv') inputDiv;


  public cityName: string;
  public storedCity = localStorage.getItem("City");

  constructor() { 
    this.cityName = '';
  }

  ngOnInit() {

  }

  update() {
    localStorage.setItem("City", this.cityName);
    this.cityName = '';
  }
  removeCity() {
    localStorage.removeItem("City");
  }

}

Matthias Sommer · Accepted Answer · 2018-06-05 09:37:57Z

1

Add an *ngIf to the input hiding it when the value is set

<input *ngIf='!cityName; else citySet' type="text" [(ngModel)]="cityName" name="cityName" value={{cityName}} id="cityName" class="form-control" placeholder="Add City ......">

and else just show the value

<ng-template #citySet>{{cityName}}</ng-template>

answered Jun 5, 2018 at 9:37

Matthias Sommer

1,08713 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3869304 Over a year ago

i tried with <ng-template> and its working when i add cityname but its not working when i try to delete cityname.

Matthias Sommer Over a year ago

You have to set cityName in removeCity() { this.cityName = ''; localStorage.removeItem("City"); }

Collectives™ on Stack Overflow

How to change view after deleting or adding in angular 5+?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related