title: Get and display data from Firebase in Angular
body: <p>I have some records in firebase which I want to display on my HTML page. I have attached the structure of the database. 
  Now, I want to display the years in form an array (which are clickable). On selecting a particular year, I want the respective records to be retrieved in my code.</p>
  
  <p>I tried retrieving the years,but was unable to display them on the page. I tried a static array as years=["1999","1994"] which worked. Only the data from database is not being retrieved and displayed.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="list-group " *ngFor="let year of years"&gt;
  
      &lt;a routerLink="records"  routerLinkActive="active" &gt;
          &lt;mdb-icon fas icon="table" class="mr-3"&gt;&lt;/mdb-icon&gt;{{year}}&lt;/a&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>export class NavigationComponent implements OnInit {
    @ViewChild('sidenav', {static: true}) sidenav: ElementRef;
  
    //years = ['1999', '2004', '2019'];
    clicked: boolean;
    resizedImage: Blob;
  
    years:AngularFireList&lt;any[]&gt;;
    // TODO: Need to fix the click effect of years
  
  
  
  
  
    constructor(af:AngularFireDatabase,
      private router: Router,
  
      //private userService: UserService
      //private ng2ImgMax: Ng2ImgMaxService
    ) {
      this.clicked = this.clicked === undefined ? false : true;
      this.years=af.list('/years/Akhilesh');}
  </code></pre>
  
  <p>
  That's the typescript code^</p>
  
  <p><a href="https://i.stack.imgur.com/AlGjc.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AlGjc.jpg" alt="Database Structure"></a></p>