title: How to automatically update the details on the html page without refresh
body: <p>When I click on the update button the code works successfully the data gets change but I have to refresh the page in order to view the changes. </p>
  
  <p>What can I do in this code so that as soon as I hit enter the first name and last name change is reflected without the need to manually refresh the page.</p>
  
  <p>Profile component <code>html</code></p>
  
  <pre><code>    &lt;h3 class="profile-username text-center"&gt;{{userDetail.first_name}} {{userDetail.last_name}}&lt;/h3&gt;
  
      //update profile form
  
      &lt;form method="post" [formGroup]="updateForm" (ngSubmit)="onSubmit()"&gt;
            &lt;div class="form-group"&gt;
                &lt;input type="text" name="first_name" formControlName="first_name" placeholder="First Name"&gt;
                &lt;/div&gt;
                &lt;div class="form-group"&gt;
                &lt;input type="text" name="last_name" formControlName="last_name" placeholder="First Name"&gt;
           &lt;/div&gt;
      &lt;button&gt;Update&lt;button&gt;
  </code></pre>
  
  <p>Typescript file</p>
  
  <pre><code>export class MyProfileComponent implements OnInit {
  
  //data comes from api with the help of resolver
      constructor(private activeRoute: ActivatedRoute, private router: Router, private formBuilder: FormBuilder, private auth: AuthService) {
                        activeRoute.data.subscribe((data)=&gt; {
                        this.userDetail = data.key.data;
                      })
  
  //update profile input fields is initialized with the relevant details
  
  ngOnInit() {
     this.updateForm = this.formBuilder.group({
          first_name: [this.userDetail.first_name],
          last_name: [this.userDetail.last_name],
      //api updates the profile on submit
   }
  
   onSubmit() {
       this.auth.updateUser(this.updateForm.value).subscribe((res)=&gt;{
                 console.log(res);
            },(err)=&gt;{
                 console.log(err);
            }); 
   }
  </code></pre>
  
  <p>auth service file</p>
  
  <pre><code>//Get User Profile
  getUserProfile() {
      return this.http.post(this.userProfileApi, null);
  }
  //Update User
  updateUser(user: any) {
      return this.http.post(this.updateUserDetailsApiUrl, user);
  }
  </code></pre>
  
  <p>resolver service which gets profile data (<code>this.userDetail</code> in My profile component)</p>
  
  <pre><code>constructor(private http: HttpClient, private auth: AuthService) { }
  
  resolve(route: ActivatedRouteSnapshot) {
        if(localStorage.getItem('access_token')){
           return this.auth.getUserProfile();
        }
  </code></pre>
  
  <p>Routing</p>
  
  <pre><code>{ 
      path: 'dashboard', 
      canActivate: [AuthGuard], 
      resolve: {"key": ProfileDetailsResolverService}, 
      children: [
          {
               path: '',
               component: DashboardComponent,
          },
          {
              path: 'my-profile', 
              component: MyProfileComponent
          },
      ]
  }
  </code></pre>