spnq

Проще всего сделать два разных массива и отображать их отдельно (если я правильно понял).

Пусть изначальный массив, как на фидле

original = [
  {id: 1, name: 'test_1', date: '2018-12-9', var: true},
  {id: 2, name: 'test_2', date: '2018-12-2', var: false},
  {id: 3, name: 'test_3', date: '2018-12-6', var: true},
  {id: 4, name: 'test_4', date: '2018-12-8', var: false},
  {id: 5, name: 'test_5', date: '2018-12-10', var: true},
  ];

Тогда новый отсортированный по дате массив с var === true:

sortedArray = original.filter( next => next.var).sort((a, b) => { a.date - b.date})

Массив с остальными датами без сортировки:

unsortedArray = original.filter( next => !next.var)

Можно попробовать каждое слово пихнуть в <p> и добить в css:

p {
  text-align: justify;
  font-size: 5.5vw;
}

p:after {
  content: "";
  display: inline-block;
  width: 100%;
}

vw это viewport width, т.е. ширина экрана пользователя, в данном случае размер текста будет равен 5.5% от ширины экрана.
Но для таких вещей уже есть готовые библиотеки, например fittextjs.com

Самый быстрый способ, на мой взгляд, подключить FireBase.
Туториалов много, начать можно с https://www.youtube.com/watch?v=6N_1vUPlhvk
На все вопросы, которые могут возникнуть в процессе, есть ответ на том же канале.

Вообще правильнее всего вынести эти запросы в сервис и импортировать туда HttpClient.

import { HttpClient } from '@angular/common/http';

Далее инжектим его в конструктор сервиса:
constructor(private http: HttpClient) {}

После делаем нужный метод для запроса (в данном примере пусть возвращает Observable с массивом любых данных):

getServices(): Observable<Array<any>> {
    return this.http.get<Array<any>>(`адрес реста`, {headers:{ 'Content-Type':'application/json' , и так далее}});
  }

Объект с хеддерами вообще опциональный и есть несколько вариантов, как их добавлять, но этот подходит по твоему примеру.

Дальше импортишь свой сервис в компонент и инжектишь в конструктор этого компонента:

constructor(private service: ИмяСевриса) {}

Дальше в нужном хуке, например в ngOnInit() вызываешь метод и подписываешься:

ngOnInit() {
    this.service.getServices().subscribe( next => ну и дальше все, как обычно);
}

Подобный вопрос бы на - https://stackoverflow.com/questions/47910737/scrol...

Если кратко переводить -

• Каждому div даем id

  <div id="first"></div>
  <div id="second"></div>
  <div id="third"></div>

  
  
• Дальше пишем функцию:
  

  $( document ).ready(function() {
      var divs = ["first", "second", "third"];
      var counter = 0;
  });
  
  function cycle(element) {
      $(element).attr("href", divs[counter]);
      if(counter < divs.length - 1) {
          counter++;
      }
      else {
          counter = 0;
      }
  }

  
  
  
• И, например, делаем какой-нибудь div c этой функцией по клику, в href ставим id нужного div
  

  <div><a onclick="cycle(this);" href="#first_div"></a></div>