How to show a running progress bar while route is loading in angular 2?

Question

Is there any way to show a running progress bar while my page is loading like this, in my angular2 app? The code is below. It shows the specific component I need to use the loading bar in it.

here is component.ts and service.ts

component.ts

news: AllSpecialNews[]= [];

ngOnInit(): void {
      this.getServerData(1);
  }
  
  
getServerData(event) {
    this._newsServicse.getPageDataSpcial(event).subscribe(
      response => {
          this.news = response.data;
          this.totalItems = response.total;
      },
      error => {
        alert('خطأ بالاتصال ');
      }
    );
      return event;
  }
  
  
    
service.ts

getPageDataSpcial(id: number) {
        return this._http.get(`${this.pageSpical}${id}`)
            .map((res: Response) => res.json());
    }

here is the html page

<div class="home" *ngIf="news" >
        <div class="container">
            <div class="row ">
                <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="header-news">
                            <div class="tittle pull-right">
                                <h2>أخبار مميزة</h2>
                            </div> 
                        </div>
                    </div>
                    <div class="view-news">
                        <div  class="row">
                            <a [routerLink]= "['/news', news[0]?.id+'-'+ news[0]?.seo_name]">
                                <div class="col-lg-5 col-md-5 col-sm-5 col-xs-12">
                                    <img width="100%" [style.height.px]="265" src="https://api.watania.net/290x270/{{news[0]?.image}}" alt="{{news[0]?.title}}">
                                </div>
                                </a>
                            <div class="col-lg-7 col-md-7 col-sm-7 col-xs-12">
                                <h1 class="title-one fon" innerHTML="{{news[0]?.title}}"></h1>
                                <p class="time">{{news[0]?.date_to_publish}}</p>
                                <p class="desc lead"  innerHTML="{{news[0]?.summary}}">
                                    
                                </p>
                            </div>
                        </div>
                    </div>
                   
                    <section class="results">
                        <div class="row" >
                            <div *ngFor="let item of news | paginate: {itemsPerPage: 18, currentPage: page, id: '1',totalItems: totalItems} ; let i = index"> 
                                <div *ngIf="i != 0"   class="col-lg-4 col-md-4 col-sm-6 col-x-6">                       
                                    <div class="view-item" >
                                        <span>
                                            <a class="outer-a" [routerLink]= "['/news', item?.id+'-'+item?.seo_name]"  title="{{item?.title}}" routerLinkActive="active">
                                                <img style="height:400px"  src="https://api.watania.net/230x190/{{item?.image}}"  alt="{{item?.title}}"></a>                                               
                                            <a class="inner-a down" title="{{item?.title}}" [routerLink]= "['/newsCategory' , item?.category]" routerLinkActive= "active">{{item?.category}}</a>

                                        </span>

                                        <a  class="title_news_featured" [routerLink]= "['/news' , item?.id+'-'+item?.seo_name]" title="{{item?.title}}" routerLinkActive="active">
                                            <h2 class="lead desc"> <span *ngIf="item.type" class="s">{{item?.type}}: </span> {{item?.title}}</h2>
                                            <p>{{item?.date_to_publish}}</p>
                                        </a>
                                    </div>    
                                </div>  
                            </div>        
                        </div>
                        <div class="row">
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                <pagination-controls (pageChange)="page = getServerData($event)" id="1" class="paginate pagination pull-left" maxSize="5"
                                    directionLinks="true" previousLabel=""
                                    nextLabel="" autoHide="true">
                                </pagination-controls> 
                            </div>
                        </div> 
                    </section>
                </div>
                <wn-leftside></wn-leftside>
            </div>
        </div>
    </div>

Is there any way.....Short answer: Yes! Absolutely. Long answer: need code to suggest you something. — Jai
– Jai, Commented Mar 14, 2017 at 6:39
What do you mean by "while my page is loading"? If you mean while the app code is being delivered and compiled then no, because until that has finished Angular can't be doing anything. — jonrsharpe
– jonrsharpe, Commented Mar 14, 2017 at 6:43
Then yes, but SO isn't a code writing service. There are several existing progress bar implementations; try actually using one, or taking inspiration from them to write your own. — jonrsharpe
– jonrsharpe, Commented Mar 14, 2017 at 7:01

Amee Prajapati · Accepted Answer · 2017-03-14 07:03:04Z

1

If you see basic example

Lets consider your root component app-root

in index.html there is something like this

Now anything you write between it will act as a loader. So,

this is loading

then the text "this is loading" will act as a loader.

you can write any code there, for your loading experience.

answered Mar 14, 2017 at 7:03

Amee Prajapati

6964 silver badges10 bronze badges

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

1 Comment

Mohammed Sabbah Over a year ago

Does this method detect the loading procces? I mean can I make loading bar using it? and can I use it on router-outlet?

Collectives™ on Stack Overflow

How to show a running progress bar while route is loading in angular 2?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related