• Как подключить ресурсы assets в библиотеку Angular 8?

    Qairat
    @Qairat
    frontend developer, angular 2+
    Если иконки у тебя svg, есть еще такой вариант.
    Можно через сайт icomoon сделать их как шрифты.
    Добавляешь все свои иконки туда, потом этот сайт генерирует иконки в шрифты.
    И можешь у себя проекте использовать таким образом:

    <i class="icon-settings"> </i>

    Почему так удобно? Потому что можешь в стилях задавать им размер, и цвет.
    А если будешь использовать svg на прямую, то тебе придется для разных цветов, добавлять лишние иконки.
    Ответ написан
  • Как запустить приложение на сервере?

    Qairat
    @Qairat
    frontend developer, angular 2+
    Смотри, запустить приложение, имеешь ввиду опубликовать на сервере?
    То надо для начало у себя локально собрать проект, для этого пишешь след.: ng build --prod
    Потом если посмотришь папки проекта, там появится папка dist, и все что там находиться уже просто публикуешь на сервере.
    Ответ написан
    Комментировать
  • Как использовать базу данных для Angular 2 на хостинге?

    Qairat
    @Qairat
    frontend developer, angular 2+
    Просто использовать базу через ангуляр не получиться. Потому что ангуляр предназначен для разработки фронта.
    Чтобы подключиться к базе, тебе надо на другом языке, например php, java, c#, nodejs, на одном из них написать бэкенд, подключение к базе, и оттуда данные передавать, либо получать через api. А так просто так не подключишься.
    Ответ написан
    Комментировать
  • На чем лучше написать проект?

    Qairat
    @Qairat
    frontend developer, angular 2+
    Смотри, если хочешь использовать react, angular, vue, то это как сам знаешь фрейворки для фронтенд разработки, на нем не сможешь бэкенд написать. И придется тебе для бэкенда еще новый проект создавать, это можешь на php, java, c#, nodejs. По идее такой подход хорошо будет, если ты хочешь сделать бэкенд отдельно и будешь его использовать везде в любом месте, это в web проекте, в мобилке(android, ios). Если даже будешь использовать только в web проекте, то такой подход лучше, чтобы дальше развивать сам проект. Типа у тебя фронт и бэк отдельно и все по полочкам.

    И есть такой вариант, то что можешь все это на одном php, java, c# сделать. И бэк и фронт.

    Например лично я делаю проекты фронт на angular, бэк на c#, база mssql.
    Ответ написан
    Комментировать
  • Асинхронный пайп или как обновить значение после подгрузки данных?

    Qairat
    @Qairat
    frontend developer, angular 2+
    думаю можно сделать вот так:
    в компоненте где надо использовать pipe,
    для начало запрашиваешь информацию о валютах,
    loading: boolean = false;
     ngOnInit() {
       this.loading = true;
       this.service.getInfoValute().subscribe(res => {
         if (res) {
            this.loading = false;
         }
       });
     }


    а в шаблоне проверку поставить:
    <ng-container *ngIf="!loading">
      <div>{{ IMoney | pipe }}</div>
    </ng-container>
    Ответ написан
    Комментировать
  • Как в angular 8 показать spinner загрузки?

    Qairat
    @Qairat
    frontend developer, angular 2+
    обычно делаю так:
    component.ts
    loading: boolean = false;
     data = [];
     ngOnInit() {
      this.loading = true;
      this.service.getAll().subscribe(res => {
       this.data = res;
       this.loading = false;
      });
     }

    component.html
    <ng-container *ngIf="loading">
      <div class="loader"> </div>
    </ng-container>
    <ng-container *ngIf="!loading">
      //показываем данные
    </ng-container>
    Ответ написан
    Комментировать
  • Как показать бадж в цикле ngFor по условию?

    Qairat
    @Qairat
    frontend developer, angular 2+
    updateData(persons[], badges[]) {
      let res = persons.map(person = > {
      let findInBadge = badges.find(f => f.personId == person.personId);
        return {
          personId: person.personId,
          name: person.name
          badge: findInBadge.badge
       }
      })
      return res;
    }


    дальше вызываешь в ngOnInit()

    newArray = [];
    ngOnInit() {
     this.newArray = this.updateData(this.persons, this.badges);
    }


    И далее в шаблоне используешь this.newArray;
    Ответ написан
    Комментировать
  • Как создать всплывающую форму по нажатию кнопки для ToDoList?

    Qairat
    @Qairat
    frontend developer, angular 2+
    Можешь использовать angular material dialog
    Либо написать свою, просто создаешь div,
    и position: absolute, далее задаешь позицию где сделал клик.
    Ответ написан
    Комментировать
  • Как сопоставить данные и вывести результат?

    Qairat
    @Qairat
    frontend developer, angular 2+
    obj = {
    action: 'meet'
    }

    здесь точно просто объект? или это массив объектов.
    Если это объект то у тебя в шаблоне for не сработает. Скорей всего это массив.
    Если это массив, то примерно так можно сопоставить.

    А если все таки это один объект, то можешь использовать просто filter.
    this.new Array = this.PanelControl.filter(f => f.action === obj.action);


    А насчет даты тебе надо проверку сделать используя moment или же без него, примерно так:
    let now = moment().format('YYYY.MM.DD');
    checkDate(date) {
     if (date === now) {
      return 'Сегодня'
     }
    }

    Либо прям в шаблоне где выводишь дату можно проверку поставить
    <span>{{now === x.date ? 'Сегодня': x.date}}</span>
    Ответ написан
  • Как правильно расширять функционал модуля в Angular7?

    Qairat
    @Qairat
    frontend developer, angular 2+
    Думаю предоставление доступа можно сделать на уровне базы.
    Например, даете пользователям роли.
    У ролей будет разрешении на excell, google drive и т.д.
    Далее с апишки будете возвращать для конкретного пользователя типа такого json-а:
    {
      roleId: 1,
      roleName: 'Administrator',
      permissionToButton: [ 'excell', 'google drive']
    }


    Далее в шаблоне будете использовать этот объект чтобы показать эти кнопки которые приходит с базы.

    <div class="buttons">
       <div class="button" *ngFor="let btn of obj.permissions" (click)="clickToBtn(btn)">
         {{btn}}
       </div>
    </div>


    И в конечном результате, будете полностью контролировать доступы через базу, даже можете отдельный интерфейс замутить для этого.
    Ответ написан
  • Как достать дату из дочернего компонента Date Time Picker и поместить в input родительского компонента angular?

    Qairat
    @Qairat
    frontend developer, angular 2+
    Если посмотреть календарь, то там есть `@Output()
    readonly change = new EventEmitter>();`

    его надо добавить
    <dl-date-time-picker (change)="getDate($event)"> </dl-date-time-picker>


    потом в .ts файле:
    date;
      getDate(event) {
         this.date = event;
      }


    и в шаблоне:
    <input type="text" [(ngModel)]="date"/>

    Примерно так.
    Ответ написан
    Комментировать
  • Как подключить к Angular 7 material?

    Qairat
    @Qairat
    frontend developer, angular 2+
    Думаю ты забыл добавить стили в файл angular.json
    "styles": [
                  {
                    "input": "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
                  },
                  "src/styles.scss"
                ]
    Ответ написан
    1 комментарий
  • Как сделать svg компонент в приложении Angular?

    Qairat
    @Qairat
    frontend developer, angular 2+
    В одном проекте использовал этот сайт icomoon
    Туда загружаешь все исконки, потом он тебе выдаст его как шрифты.
    и можешь его использовать в шаблонах так:
    <div class="icon-pen"> </div>
    и в стилях для него прописывать стиль:
    .icon-pen {
      color: red;
      font-size:30px;
    }
    Ответ написан
    Комментировать
  • Как оформить вложенные компоненты в Angular 2+?

    Qairat
    @Qairat
    frontend developer, angular 2+
    Обычно я создаю все компоненты в папке components, если же их буду использовать в нескольких местах примерно так:
    -components:
      -A component
      -B component
      -C component


    А если я точно знаю что какой-то компонент будет использоваться только в одном месте, то тогда просто создаю его там где надо, примерно так:
    -components:
      -A component
          -B component
      -C component


    плюс, у меня есть папки shared, pages,
    внутри shared -> pipes, directives, services, и т.д.
    внутри pages -> главные компоненты, такие как main-page.component, login-page.component

    Самое главное чтобы все было просто, и понятно. Когда другой человек понял все с первого раза, и интуитивно.
    Ответ написан
    Комментировать
  • Возможно ли передавать цвет в темплейт для css-класса?

    Qairat
    @Qairat
    frontend developer, angular 2+
    <div class="myClass">
      TEXT
    </div>


    <div [ngStyle]="{'color':  '#000000'}">
       TEXT
    </div>


    только так.
    Ответ написан
    Комментировать
  • Почему не переходит по роуту отдельного элемента?

    Qairat
    @Qairat
    frontend developer, angular 2+
    Переход по роутам можно сделать так:
    { path: 'main', component: HelloComponent },
      { path: 'main/:id', component: HelloComponent },


    [routerLink]="['../main', d.id]"

    Перейди по ссылке

    а то что у тебя ошибка, это не связано с роутами, там ошибка конкретно с MatDialogRef.
    Ответ написан
    Комментировать
  • Почему метод обновления данных не работает?

    Qairat
    @Qairat
    frontend developer, angular 2+
    Вместо этого
    put
    можешь использовать просто
    post или get


    И на стороне бэка проверять если есть такой ID, то там update сделать.
    А если нет то можешь даже Insert сделать!

    Можно через один метод двух зайцев убить.
    Ответ написан
    Комментировать
  • Как распарсить данные полученные с Json?

    Qairat
    @Qairat
    frontend developer, angular 2+
    Посмотри

    Я сам обычно так делаю, и все делаю через Interface, так более удобно.
    В примере сделал парсинг для People.
    Ответ написан
    Комментировать
  • Как вывести конкретные поля из массива объекта?

    Qairat
    @Qairat
    frontend developer, angular 2+
    newObj = [];
    this.newObj = this.mecResp.metaEntityConfigtime.metaEntityFields;


    И дальше использовать this.newObj:
    this.newObj.metaEntityFieldId;
    this.newObj.metaEntityFieldName;
    this.newObj.metaEntityFieldDescription
    ;
    Ответ написан
    Комментировать
  • Как сделать чтобы размеры flex контейнера зависили от содержимого?

    Qairat
    @Qairat
    frontend developer, angular 2+
    Думаю можно вот так: Код
    Ответ написан
    Комментировать