CODEWITHSUNDEEP
angular
user9998053
user9998053

Reputation:

Angular redirect to route after http call

home.component.html

<meta name="viewport" content="width=device-width" initial scale ="1.0" user 
scalable="no">

 <body>

 <div class="container">
 <div class="row">
 <div class="form_bg">
 <form>
   <h2 class="text-center">Login Page</h2>
  <br/>
  Enter Username : <input type="text" class="form-control" 
  [(ngModel)]="username" name="username">

  <a [routerLink]="['/profile']" class="btn btn-primary" 
  (click)="findProfile()">Submit</a>

  </form>
  </div>
  </div>
  </div>
  </body>


this.profileService.getProfileRepos().subscribe(repos => {
    console.log(repos);
    this.repos = repos;
  })    
 }

ngOnInit() {
}


 }

When I am entering the username and click on submit then it is redirecting me to another page. But it shows nothing on that page.

Upvotes: 1

Views: 71

Answers (2)

Vijay Gajera
Vijay Gajera

Reputation: 1364

@rjv agree with you.

Please try to remove all content of profile.html and just print <h1>hello</h1> check if its working or not if its working than your condition is not satisfied.

Please call method inside ngOnInit() method of profile.component.ts because on that once profile will get than html will render.

Upvotes: 0

rjv
rjv

Reputation: 6776

Although I strongly oppose your site asking for login details of another website, here is what you are doing wrong

 <a [routerLink]="['/profile']" class="btn btn-primary" onclick="findProfile()">Submit</a>

should be

 <a class="btn btn-primary" (click)="findProfile()">Submit</a>

onclick cannot be used to bind to functions on component.ts in angular, you must use (click). Also, you redirect to /profile upon click using [routerLink]

And in the findProfile function, you should navigate to profile once it is resolved.

Also, consider using RxJs operators like flatmap, combineLatest etc in findProfile since you have multiple subscriptions in the functions, and its unclear when you should do the redirect.

Upvotes: 1

Related Questions