Angular 5 i flex layout – dlaczego nie działa?

Pisząc w pracy aplikację webową natknąłem się na problem, którego rozwiązaniem się z Wami podzielę. Dojście do działającej wersji zajęło mi dobre kilka godzin dlatego mam nadzieję, że komuś tym tekstem uproszczę pracę.

Problematyczna stopka

Chcę wykorzystać właściwości  display: flex; z CSSa do zrobienia stopki, która jest zawsze na dole ekranu. Chodzi o zachowanie jak na poniższym obrazku:

Jak powinno być

Problem znany i powszechnie opisany dlatego łatwo go znaleźć w internecie. Standardowo, wg wielu poradników robi się to w ten sposób:

HTML:

CSS:

Łatwo i skutecznie. Działa na wszystkich nowszych przeglądarkach, bez nadmiaru magii.

Jak jest w Angularze

Jednak w Angularze 2+ takie rozwiązanie nie do końca działa. Dlaczego? Bo Angular działa na komponentach. A komponenty są widoczne w wynikowym kodzie HTML.

W najprostszym przykładzie, gdzie mamy tylko AppComponent i w nim dodajemy footer, nasz kod HTML będzie wyglądał mniej więcej tak:

Widzicie element  <app-root> ? Nie ma on wpływu na renderowanie treści. Ale jak się okazuje ma wpływ na style.

Jak się okazuje, żeby mój przykład działał w Angularze muszę dla tego, i każdego innego ponad naszym contentem, elementu dodać takie style:

Tylko jak to zrobić? W końcu nasz komponent nie ma żadnej swojej klasy. Nie widzimy go też w kodzie HTML, który piszemy, pojawia się dopiero po uruchomieniu aplikacji.

Otóż rozwiązaniem w tym wypadku jest skorzystanie ze specjalnego selektora  :host . Odnosi się on do komponentu, dla którego dodajemy style. Tak więc w naszym przypadku musi się on znaleźć w stylach dla komponentu AppComponent. Jeżeli korzystasz z osobnych plików ze stylami to Twój plik app.component.css będzie wyglądał następująco:

Jeszcze do tego uwaga dla osób piszący w SASSie zamiast w CSSie. W wersji, z której ja korzystam, a jest ona raczej świeża, jest pewien problem z tym selektorem. Mianowicie jeśli wpiszecie go tak jak powyżej to dostaniecie błąd z nieprawidłowym znakiem  : . Niestety w niektórych wersjach kompilatora SASSa trzeba wyescapować znak dwukropka. Dlatego w pliku app.component.sass będziesz miał taki zapis:

Zwróć uwagę na backslash na początku. Wtedy błąd powinien nie wystąpić.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *