RaimonxDev

@use 'sass:map';
@use 'variants' as * with (
  $breakpoints: (
    'small': 640px,
    'medium': 768px,
    'large': 1024px,
    'wide': 1280px,
  )
);

RaimonxDev

<!-- Root observer tendra todas las referencias que tengan childObserver -->
<div rootObserver (observeElements)="fn($event)">
  <div childObserve>Element 1</div>
  <div childObserve>Element 2</div>
  <div childObserve>Element 2</div>
</div>
2
<!-- Observar solo en "element 2"  -->

RaimonxDev

Aplicamos la animacion en el html
<div *ngIf="isOpenMenu" @showMenu class="absolute  z-50 top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden">
        <div class="rounded-lg shadow-md bg-white ring-1 ring-black ring-opacity-5 overflow-hidden">
          <div class="px-5 pt-4 flex items-center justify-between">
            <div class="-mr-2">
              <button (click)="toogleOpen()" type="button" class="rounded-md p-2 inline-flex items-center justify-center text-indigo-400 hover:text-indigo-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
                <span class="sr-only">Close main menu</span>
                <!-- Heroicon name: x -->
                <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />

RaimonxDev

version: "3.3"
services:
  #CHANGE NAME SERVICES
  wordpress-plazafrontend:
    ##IMAGE WORDPRESS ##
    image: wordpress
    restart: always
    container_name: CHANGE_CONTAINER_NAME
    depends_on:
      - mysql

RaimonxDev

# etapa de compilación
FROM node:lts-alpine3.10 as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# etapa de producción
FROM nginx:1.19.10-alpine as production-stage

RaimonxDev

FROM node:lts-alpine3.10 as node

RUN mkdir /app

COPY package.json package-lock.json /app/

WORKDIR /app

# Instala y construye el Angular App
RUN npm ci

RaimonxDev

FROM node:lts-alpine3.10 as node

RUN mkdir /app

COPY package.json yarn.lock /app/

WORKDIR /app

# Instala dependencias de nuestra App
RUN yarn install

RaimonxDev

##Configuracion Globlal##
version: "3.3"

services:
  traefik:
    image: "traefik:v2.4"
    container_name: "traefik"
    restart: always
    command:
      #- "--log.level=DEBUG"

RaimonxDev

##Configuracion Globlal##
version: "3.3"

services:
  traefik:
    image: "traefik:v2.1.3"
    container_name: "traefik"
    command:
      #- "--log.level=DEBUG"
      - "--api.insecure=false"

RaimonxDev

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Meta, MetaDefinition, Title } from '@angular/platform-browser';

import { of, Subscription } from 'rxjs';
import { catchError, map, pluck, take } from 'rxjs/operators';

import { environment } from 'src/environments/environment';
// utils
import { handleHttpResponseError } from '@utils/http-errors';