title: How to call function assigned to variable with parameter
body: <p>I have a structure like this:</p>
  
  <pre><code>//function declaration
  someFunc() = {
   // ...
  }
  
  //assign function to variable
  let f = someFunc();
  
  //call
  f();
  </code></pre>
  
  <p>I want to pass arguments to someFunc() with calling this function by variable, like:</p>
  
  <pre><code>f(arg); 
  </code></pre>
  
  <p>but f is not a variable then. How to process the parameter in fucntion by this way?</p>
  
  <p><strong>Edit:</strong>
  In the question above, I thought about calling a function by variable. Something like:</p>
  
  {{ f }}
  
  <p>and that f is assigned to function which returns some value.</p>
  
  <p>Why I do that is because I need to initialize function in ngOnInit lifecycle (my goal is to call function just one time).</p>
  
  <p>My view and ts code below:</p>
  
  <p>TS:</p>
  
  <pre><code>import {Component, OnInit, Input} from '@angular/core';
  import {Router} from "@angular/router";
  import {PostsService} from "../../services/posts.service";
  import {AuthService} from "../../services/auth.service";
  import {ConfirmationModalService} from "../../services/confirmation-modal.service";
  import {LoaderService} from "../../services/loader.service";
  import {ToastService} from "../../services/toast.service";
  
  declare var M: any;
  
  @Component({
      selector: 'app-posts',
      templateUrl: './posts.component.html',
      styleUrls: ['./posts.component.scss']
  })
  export class PostsComponent implements OnInit {
      avatar: string;
      loggedUser: any;
      modalId: any;
      editModal: any;
      editModalInstance: any;
      content: string;
      contentEdited: string;
      orderSelect: any;
      orderSelectInstance: any;
      showButton: boolean;
      getAvatar: any;
  
      constructor(private postsService: PostsService, private authService: AuthService,
                  private router: Router, private confirmationModalService: ConfirmationModalService,
                  private loaderService: LoaderService, private toastService: ToastService) {
      }
  
      ngOnInit() {
  
          this.showButton = true;
  
          this.editModal = document.querySelector('#edit-modal');
          this.editModalInstance = M.Modal.init(this.editModal);
  
          this.orderSelect = document.querySelectorAll('#post-order-select');
          this.orderSelectInstance = M.FormSelect.init(this.orderSelect);
  
          this.orderSelect = 'post_date';
  
          this.loggedUser = localStorage.getItem('user') ?
              JSON.parse(localStorage.getItem('user')).id : '';
  
          this.loaderService.isLoading = true;
  
          this.postsService.getPosts().subscribe(response =&gt; {
              this.postsService.getPostHandling(response);
              this.loaderService.hideLoader();
          }, err =&gt; {
              this.toastService.error(err);
              this.loaderService.hideLoader();
              return false;
          });
  
          this.getAvatar = this.getCreatorAvatar(123);
      }
  
      loadMore() {
          this.loaderService.isLoadingSmall = true;
          if (this.orderSelect === 'post_date') {
              this.postsService.getPosts(true).subscribe(response =&gt; {
                  if (this.postsService.postIndex &gt; response.posts.length) {
                      this.showButton = false;
                  }
                  this.postsService.getPostHandling(response);
                  this.loaderService.hideLoaderSmall();
              }, err =&gt; {
                  this.toastService.error(err);
                  this.loaderService.hideLoaderSmall();
                  return false;
              });
          } else if (this.orderSelect === 'rate') {
              this.postsService.getPostsOrdered(true).subscribe(response =&gt; {
                  if (this.postsService.postIndex &gt; response.posts.length) {
                      this.showButton = false;
                  }
                  this.postsService.getPostHandling(response);
                  this.loaderService.hideLoaderSmall();
              }, err =&gt; {
                  this.toastService.error(err);
                  this.loaderService.hideLoaderSmall();
                  return false;
              });
          }
      }
  
      order(orderSelect) {
          this.loaderService.isLoading = true;
          if (orderSelect === 'post_date') {
              this.postsService.getPosts().subscribe(response =&gt; {
                  this.postsService.getPostHandling(response);
              }, err =&gt; {
                  this.toastService.error(err);
                  return false;
              });
          } else {
              this.loaderService.isLoading = true;
              this.postsService.getPostsOrdered().subscribe(response =&gt; {
                  this.postsService.getPostHandling(response);
              }, err =&gt; {
                  this.toastService.error(err);
                  return false;
              });
          }
          this.loaderService.hideLoader();
      }
  
      onEditModalSubmit() {
          this.editModalInstance.close();
          this.postsService.editPost(this.modalId, this.contentEdited).subscribe(data =&gt; {
  
              if (data.success) {
                  this.loaderService.isLoading = true;
                  this.postsService.getPosts().subscribe(response =&gt; {
                      this.postsService.getPostHandling(response);
                  }, err =&gt; {
                      this.toastService.error(err);
                      return false;
                  });
                  this.loaderService.hideLoader();
                  this.toastService.success(data.msg);
              } else {
                  console.log('some error');
              }
          });
      }
  
      openEditModal(id, content) {
          this.modalId = id;
          this.editModal.querySelector('#textarea-edit').value = content;
          this.editModalInstance.open();
      }
  
      deletePost(id) {
          this.confirmationModalService.content = 'Are you sure you want to delete this post?';
          this.confirmationModalService.cta = 'Delete';
          this.confirmationModalService.proceed = () =&gt; {
              this.postsService.deletePost(id).subscribe(data =&gt; {
                  if (data.success) {
                      this.toastService.success(data.msg);
                      this.loaderService.isLoading = true;
                      this.postsService.getPosts().subscribe(response =&gt; {
                          this.postsService.getPostHandling(response);
                          this.loaderService.hideLoader();
                      }, err =&gt; {
                          this.toastService.error(err);
                          return false;
                      });
                  } else {
                      this.toastService.error(data.msg);
                  }
  
              });
              this.authService.decreasePostAmount(JSON.parse(localStorage.getItem('user')).id)
                  .subscribe(() =&gt; {
                  });
              this.confirmationModalService.modalInstance.close();
          };
          this.confirmationModalService.modalInstance.open();
      }
  
      ratePost(id, creator_id) {
          this.postsService.ratePost(id, creator_id).subscribe(() =&gt; {
              if (this.orderSelect === 'post_date') {
                  this.postsService.getPosts().subscribe(response =&gt; {
                      this.postsService.getPostHandling(response);
                  }, err =&gt; {
                      this.toastService.error(err);
                      return false;
                  });
              } else if (this.orderSelect === 'rate') {
                  this.loaderService.isLoading = true;
                  this.postsService.getPostsOrdered().subscribe(response =&gt; {
                      this.postsService.getPostHandling(response);
                      this.loaderService.hideLoader();
                  }, err =&gt; {
                      this.toastService.error(err);
                      this.loaderService.hideLoader();
                      return false;
                  });
              }
          });
      }
  
      revertRate(id, loggedUser_id) {
          this.postsService.revertRatePost(id, loggedUser_id).subscribe(() =&gt; {
              if (this.orderSelect === 'post_date') {
                  this.postsService.getPosts().subscribe(response =&gt; {
                      this.postsService.getPostHandling(response);
                  }, err =&gt; {
                      this.toastService.error(err);
                      return false;
                  });
              } else if (this.orderSelect === 'rate') {
                  this.loaderService.isLoading = true;
                  this.postsService.getPostsOrdered().subscribe(response =&gt; {
                      this.postsService.getPostHandling(response);
                      this.loaderService.hideLoader();
                  }, err =&gt; {
                      this.toastService.error(err);
                      this.loaderService.hideLoader();
                      return false;
                  });
              }
          });
      }
  
      isLiked(users_liked) {
          return users_liked.indexOf(this.loggedUser) &gt; -1;
      }
  
      getCreatorId(post) {
          return post.creator[0]['id'];
      }
  
      getCreatorName(post) {
          return post.creator[0]['name'];
      }
  
      getCreatorAvatar(id) {
          this.authService.getAvatar(id).subscribe(data =&gt; {
              this.avatar = data.avatar;
          });
      }
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="input-field col s3"&gt;
          &lt;select id="post-order-select"
                  [(ngModel)]="orderSelect" name="orderSelect" (change)="order(orderSelect)"&gt;
              &lt;option value="post_date"&gt;Recent posts&lt;/option&gt;
              &lt;option value="rate"&gt;Most rated&lt;/option&gt;
          &lt;/select&gt;
          &lt;label&gt;Order by&lt;/label&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="post-list" class="post-list"&gt;
      &lt;ng-container *ngIf="!loaderService.isLoading"&gt;
          &lt;div *ngFor="let post of postsService.posts" class="card-panel first"
               [ngClass]="{'own-post' : authService.loggedIn() &amp;&amp; getCreatorId(post) === loggedUser}"&gt;
              &lt;div class="post-details"&gt;
                  &lt;div class="post-header"&gt;
                      &lt;div class="author-avatar"
                           [ngStyle]="{ 'background-image' : 'url(' + getAvatar + ')'}"&gt;
                      &lt;/div&gt;
                      &lt;div class="post-info"&gt;
                          &lt;div class="author-fullname grey-text text-darken-3"&gt;{{ getCreatorName(post) }}&lt;/div&gt;
                          &lt;div class="post-date deep-orange-text"&gt;{{ post.post_date | timeago }}&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="teaser grey-text text-darken-1" [innerHTML]="post.content"&gt;&lt;/div&gt;
                  &lt;div class="valign-wrapper rate"&gt;
                      &lt;ng-container *ngIf="authService.loggedIn() &amp;&amp; post.creator.id !== loggedUser"&gt;
                          &lt;i *ngIf="!isLiked(post.users_liked)"
                             class="material-icons tiny deep-orange-text text-lighten-4"
                             (click)="ratePost(post._id, loggedUser)"&gt;thumb_up&lt;/i&gt;
                          &lt;i *ngIf="isLiked(post.users_liked)" class="material-icons tiny deep-orange-text"
                             (click)="revertRate(post._id, loggedUser)"&gt;thumb_up&lt;/i&gt;
                      &lt;/ng-container&gt;
                      &lt;ng-container *ngIf="authService.loggedIn() &amp;&amp; post.creator.id === loggedUser"&gt;
                          &lt;i class="material-icons tiny deep-orange-text text-lighten-4 own"&gt;
                              thumb_up
                          &lt;/i&gt;
                      &lt;/ng-container&gt;
                      &lt;ng-container *ngIf="!authService.loggedIn()"&gt;
                          &lt;i class="material-icons tiny deep-orange-text text-lighten-4 own"&gt;
                              thumb_up
                          &lt;/i&gt;
                      &lt;/ng-container&gt;
                      &lt;span class="grey-text text-darken-3"&gt;{{ post.rate }}&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;ng-container *ngIf="authService.loggedIn() &amp;&amp; post.creator.id === loggedUser"&gt;
                  &lt;a class="btn-floating btn-medium deep-orange darken-3 right"
                     (click)="deletePost(post._id)"&gt;
                      &lt;i class="material-icons"&gt;delete&lt;/i&gt;
                  &lt;/a&gt;
                  &lt;a class="btn-floating btn-medium deep-orange right"
                     (click)="openEditModal(post._id, post.content)"&gt;
                      &lt;i class="material-icons"&gt;create&lt;/i&gt;
                  &lt;/a&gt;
              &lt;/ng-container&gt;
          &lt;/div&gt;
          &lt;div *ngIf="loaderService.isLoadingSmall"
               class="row"&gt;
              &lt;div class="col s12 center-align"&gt;
                  &lt;div class="preloader-wrapper small active"&gt;
                      &lt;div class="spinner-layer"&gt;
                          &lt;div class="circle-clipper left"&gt;
                              &lt;div class="circle"&gt;&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="gap-patch"&gt;
                              &lt;div class="circle"&gt;&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="circle-clipper right"&gt;
                              &lt;div class="circle"&gt;&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div *ngIf="!loaderService.isLoadingSmall &amp;&amp; showButton === true" class="row"&gt;
              &lt;div class="col s12 center-align"&gt;
                  &lt;button (click)="loadMore()" class="btn deep-orange"&gt;Load more&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/ng-container&gt;
  &lt;/div&gt;
  
  &lt;div *ngIf="loaderService.isLoading" class="row"&gt;
      &lt;div class="col s12 center-align"&gt;
          &lt;div class="preloader-wrapper big active"&gt;
              &lt;div class="spinner-layer"&gt;
                  &lt;div class="circle-clipper left"&gt;
                      &lt;div class="circle"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="gap-patch"&gt;
                      &lt;div class="circle"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="circle-clipper right"&gt;
                      &lt;div class="circle"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="edit-modal" class="modal"&gt;
      &lt;div class="modal-content"&gt;
          &lt;form (submit)="onEditModalSubmit()"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col s12"&gt;
                      &lt;div class="input-field deep-orange-text"&gt;
                      &lt;textarea id="textarea-edit" [(ngModel)]="contentEdited" name="contentEdited"
                                class="materialize-textarea"&gt;&lt;/textarea&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col s12"&gt;
                      &lt;button type="submit" class="btn grey darken-4 right"&gt;Confirm editing&lt;/button&gt;
                      &lt;a href="#" (click)="editModalInstance.close()" class="btn grey darken-1 right"&gt;Cancel&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>