Divisão do grid, onInit não faz nada

boa noite,

estou com um problema estranho, pois nada q coloco no meu oninit parece ter efeito na tela, nem mesmo a variavel rows esta sendo preenchida, ja tentei de tudo, não faz o menor sentido, preciso de ajuda.

o mais estranho é q "photos" esta com valores, ao percorrer a variavel no html ele cria as imagens, porem parece q esta montando o HTML antes de fazer o que esta programado no metodo "ngOnInit()", tentei colocar no "contructor" mas não adiantou tb.

ao programar para imprimir o lenght(no html msm) do rows e de photos o resultado é: ===0 ===14

segue o codigo:

segue tb o projeto no github: https://github.com/arcCoelho/alurapic

photos.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { Photo } from '../../photo/photo';

@Component({
  selector: 'ap-photos',
  templateUrl: './photos.component.html',
  styleUrls: ['./photos.component.css']
})
export class PhotosComponent implements OnInit {

  @Input() photos: Photo[] = [];
  rows: any[] = [];

  constructor() { }

  ngOnInit() {
    this.rows = this.groupColumns(this.photos);
  }

  groupColumns(photos: Photo[]) {
    const newRows = [];
    for(let index = 0; index < photos.length; index+=3) {
        newRows.push(photos.slice(index, index + 3));
    }
    return newRows;
  }

}

photos.component.html:

<ol class="list-unstyled row">

    <li class="rows col-4"> ==={{rows.length}} ==={{photos.length}} </li>

    <li *ngFor="let cols of rows" class="row">
        <div *ngFor="let photo of cols" class="col-4">
            <ap-photo
                [url]="photo.url"
                [description]="photo.description">
            </ap-photo>
        </div>
    </li>

    <li class="rows col-4"> ==={{rows.length}} ==={{photos.length}} </li>

    <li *ngFor="let photo of photos" class="row">
        <ap-photo
            [url]="photo.url"
            [description]="photo.description">
        </ap-photo>
    </li>

</ol>

photo-list.html

<ap-photos [photos]="photos"></ap-photos>

photo-list.component.ts

import { Component, OnInit } from '@angular/core';
import { PhotoService } from '../photo/photo.service';
import { Photo } from '../photo/photo';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'ap-photo-list',
  templateUrl: './photo-list.component.html',
  styleUrls: ['./photo-list.component.css']
})
export class PhotoListComponent implements OnInit {

  photos:Photo[] =[];

  constructor(
    private photoService: PhotoService,
    private activatedRote: ActivatedRoute
    ) { 

  }

  ngOnInit(): void {
    const user = this.activatedRote.snapshot.params.userName

    this.photoService.listFromUser(user)
      .subscribe(photos => this.photos = photos);

    console.log("this.photos => photo-list", this.photos);
  }

}