logo
down
shadow

Refresh a particular component in Angular


Refresh a particular component in Angular

By : Леонид Олипа
Date : October 17 2020, 06:10 PM
wish of those help New to angular, so might sound a trivial question, however all solution provided on SO have failed to work so far. I have a simple login component wherein on submit, I redirect the user to profile page. I am able to send the user to the said component but the nav bar on top does not auto refresh, i.e. I have kept a session check, so when user logs in, the nav bar should automatically show the Logout button instead of Login/Register button. My code files are something like this: , This is how I solved it:
nav.component.html
code :
...
<li *ngIf="!auth.isLoggedIn()">
  ...
</li>
<li *ngIf="auth.isLoggedIn()">
  ...
</li>
...
export class NavComponent implements OnInit {

  constructor(public auth: AuthService) {
  }
  ...

export class AuthService {
  ...
  public isLoggedIn() {
    return this.getId() !== null;
  }
  ...


Share : facebook icon twitter icon
Angular 2: How to pass value from one component to refresh another component on change detection?

Angular 2: How to pass value from one component to refresh another component on change detection?


By : Mai Thanh Long
Date : March 29 2020, 07:55 AM
this one helps. From Harry_Ninh's excellent suggestion, here's what I came up with to allow communication between components without using a @Input and any component selectors:
In my service, I added a subject to allow the parent to announce that a search was made:
code :
@Injectable()
export class ChipFamilyService {
    private searchStringSubject = new Subject<string>();
    private _searchUrl = 'http://localhost:8888/chipfamily/'; 

    constructor(private _http: Http) {
    }

    searchAnnounced$ = this.searchStringSubject.asObservable();

    announceSearch(searchValue: string) {
        this.searchStringSubject.next(searchValue);
    }
public onSelectSearchValue(e: TypeaheadMatch): void {
    this.chipFamilyService.announceSearch(e.item.id);
}
@Component({
    template: require('./chip-family.component.html')
})
export class ChipFamilyComponent implements OnInit {
    errorMessage: string;
    chipFamilyId: number = 11223;
    chipFamilies: IChipFamily[];
    private gridOptions:GridOptions;
    subscription: Subscription;

    constructor(private chipFamilyService: ChipFamilyService) {
        this.subscription = chipFamilyService.searchAnnounced$.subscribe(
            chipFamilyId => {
                this.chipFamilyId = Number(chipFamilyId);
                this.chipFamilyService.getChipFamily(this.chipFamilyId).subscribe(
                    chipFamilies => this.chipFamilies = chipFamilies,
                    error => this.errorMessage = <any>error
                );
            });

    }
Angular.io / Angular 4. How do I refresh one component view when triggering another

Angular.io / Angular 4. How do I refresh one component view when triggering another


By : hillucky
Date : March 29 2020, 07:55 AM
seems to work fine As mentioned by JusMalcolm, OnInit doesn't run again.
But you could use a Subject to tell the NavbarComponent to fetch the data from local storage.
code :
import { Subject } from 'rxjs/Subject';

....

public static updateUserStatus: Subject<boolean> = new Subject();
constructor(...) {
   NavbarComponent.updateUserStatus.subscribe(res => {
     this.me = JSON.parse(localStorage.getItem('currentUser'));
   })
}
.subscribe(
   data => {
      NavbarComponent.updateUserStatus.next(true); // here!
      this.router.navigate([this.returnUrl]);
   },
   // more code here
How to Refresh a Component in Angular

How to Refresh a Component in Angular


By : l lyt
Date : March 29 2020, 07:55 AM
will be helpful for those in need After some research and modifying my code as below, the script worked for me. I just added the condition:
code :
this.router.navigateByUrl('/RefreshComponent', { skipLocationChange: true }).then(() => {
    this.router.navigate(['Your actualComponent']);
}); 
Angular refresh component

Angular refresh component


By : user3437097
Date : March 29 2020, 07:55 AM
With these it helps You probally dont have RefreshComponent route in you route configuration.
As far as refresing your component goes, just modify your function as follows, you don't need RefreshComponent route.
code :
changeLocation(locationData) {

    // save current route first
    const currentRoute = this.router.url;

    this.router.navigateByUrl('/', { skipLocationChange: true }).then(() => {
        this.router.navigate([currentRoute]); // navigate to same route
    }); 
}
Angular 2 - One component trigger refresh of another component on the page

Angular 2 - One component trigger refresh of another component on the page


By : EdwardV
Date : March 29 2020, 07:55 AM
help you fix your problem You need to provide component, and inject it inside constructor of component where you need to call ngOnInit of other component like I did.
Plunker Demo : https://plnkr.co/edit/M0d65wHjfg4KfwaQ5mPM?p=preview
Related Posts Related Posts :
  • Set field in mongoose document to array length
  • disable Double tap zoom/resize on safari IOS12***
  • how to add a wait in time in a for ..of?
  • Time Spent by user on a web page + Iframe
  • animate.css is not working in Chrome latest version (Version above 73)
  • Row selection and pagination - Vue
  • How can I use function chaining with dates in JavaScript?
  • What is the difference between "delete" and "Reflect.deleteProperty()"
  • How to get attributes of individual elements in jquery array
  • Why do I get different results with "=" vs. "===" in javascript with Conditional (Ternary) Operators
  • I am trying to hold value of document.getElementById("image").src=UserInput +".gif"
  • Array being pushed into another array isn't displaying
  • Is there a React.js NPM module or any other solution for image/object mutli-selection?
  • 80% Javascript Solution for Flags in Codility
  • I want to display background while scrolling down
  • RegEx for matching text between two tags
  • Does having a lot of inner 'helper' functions inside a functional stateless react component will result in worse perform
  • How to submit a form through a button outside the form?
  • ESLint: Use callback in setState when referencing the previous state
  • How to parse state from one component to another in my example?
  • Visible Html select option showing under hidden items
  • Create SVG circle using path with 6 segments
  • Getting error while reading from a text file
  • Read a value from JSON Array without entity
  • Checkbox check or uncheck value null
  • Displaying multiple slider values to users
  • Am doing the destructing right?
  • VueJS data-bind object styling not working
  • Combine array and object destructuring
  • Execution skips promise statements
  • sort an array of objects leaving first field
  • how to highlight table cells in a certain way when hover over
  • Problems when using Chosen Selectors in external helper functions
  • Need to merge two objects together that each have an array to the matching IDs
  • How to get previous 6 months date from current date in javascript
  • how to get object value only without mentioning key from array list using ngFor in angular 7
  • Plugging into on_page_change events in testcafe
  • WithStore: Cannot read property 'state' of undefined (pure-react-carousel)
  • fullcalendar event info in modal popup
  • How do i reduce time complexity of this code
  • Deep comparing object props in React not working as expected
  • JavaScript method to remove case insensitive duplicates from string/Numbers
  • When to use parentheses after function name call (es6)
  • Convert list of Objects when the levels are given in an array
  • template variable always undefined ngOnChanges
  • RegEx for matching the first word
  • Render different au-target-id in aurelia repeat
  • Why does the function start before the button is pressed?
  • where can I vote for changes to javascript?
  • Change the digit format pagination in the slider
  • Hover/focus state activated initially on page load
  • Why do my normal sync codelines, works like async?
  • How to prevent or disable Bootstrap 4 popover auto positioning behavior (Self adjusting behavior)
  • What is the meaning of ({})?
  • How do I make a link to a property if the property is yet to be declared? (In a Class)
  • Getting Promise as return value inside FlatList React-native
  • Why can't you access JSON directly from the response in Fetch API?
  • How to grab value out of this nested array
  • function is not returning any value
  • "Cannot read property 'map' of undefined (React.js)"
  • shadow
    Privacy Policy - Terms - Contact Us © 35dp-dentalpractice.co.uk