feat(common): translate new component chapter

a-new-component.md

@@ -1,33 +1,32 @@
-# A new component
+# Новый компонент
 
-In this chapter we will write a whole new component. It will allow us to add an item to the todo list. It will be composed of the HTML elements `input` and `button`. We will call it Input-Button-Unit.
+В этой главе вы узнаете как создать новый компонент, который позволит нам добавлять новые записи в todo list. Новый компонент будет состоять из `input` и `button` HTML элементов. И будет называться `input-button-unit`.
 
-We'll use the Angular CLI to generate all the needed files and boilerplate for us. The Angular CLI takes commands in a terminal window. This doesn't mean that we have to stop the process `ng serve`. Instead, we can open another terminal window or tab and run the additional commands from there. The changes will be reflected immediately in the browser.
+Мы будем использовать Angular CLI для того, чтобы сгенерировать нужные файлы и шаблон компонента для нас. Так как Angular CLI - инструмент командной строки, он принимает команды через терминал. Это не значит, что нам нужно остановить процесс `ng serve`. Вместо этого, мы можем открыть дополнительную вкладку в окне терминала и запустить все нужные команды там. Таким образом, все внесенные изменения будут сразу же отображены в браузере.
 
-Open another terminal tab and run:
+Откройте новую вкладку в терминале и выполните следующую команду:
 
 ```text
 ng g c input-button-unit
 ```
 
-As we've seen before, `ng` is the command for using the Angular CLI. `g` is a shorthand for `generate`. `c` is a shorthand for `component`. `input-button-unit` is the name we give to the component.
+Как мы уже знаем, `ng` - это команда, которая запускает Angular CLI. `g` - это сокращение для `generate`. `c` - это сокращение для `component`. `input-button-unit` - это имя компонента, который мы хотим создать.
 
-So the long version of the command is \(don't run it\):
+Полная версия команды получается следующая (ее не нужно запускать):
 
 ```text
 ng generate component input-button-unit
 ```
+Давайте посмотрим, что Angular CLI сгенерировал для нас.
 
-Let's take a look of what the Angular CLI created for us.
+Он создал новую директорию: `src/app/input-button-unit`, которая содержит три файла:
 
-It created a new folder called `src/app/input-button-unit`. There are three files there \(or four if you're not using inline-template\):
+`input-button-unit.component.css` - файл, содержащий стили для компонента.
+`input-button-unit.component.spec.ts` - файл, содержащий тесты для компонента (мы не будем использовать его для этого туториала).
+* `input-button-unit.component.ts` - в этом файле мы будем описывать логику компонента.
+* `input-button-unit.component.html` - файл, содержащий шаблон компонента.
 
-* `input-button-unit.component.css` - this is where the style that's specific to the component will be placed.
-* `input-button-unit.component.spec.ts` - this is a file for testing the component. We will not deal with it in this tutorial.
-* `input-button-unit.component.ts` - this is the component file where we will define its logic.
-* `input-button-unit.component.html` - this is the HTML template file, if you're not using inline-template.
-
-Open the file `input-button-unit.component.ts`. You can see that the Angular CLI has generated the component's configuration for us, including its selector, which is the name we gave preceded by the prefix `app`, and a default template:
+Откройте `input-button-unit.component.ts`. Обратите внимание, что Angular CLI создал и сконфигурировал для нас компонент, включая его селектор, который состоит из имени, которое мы дали компоненту: `input-button-unit.component.ts` и префикса `app`. Вот что должно получиться:
 
 {% code-tabs %}
 {% code-tabs-item title="src/app/input-button-unit/input-button-unit.component.ts" %}
@@ -45,13 +44,13 @@ Open the file `input-button-unit.component.ts`. You can see that the Angular CLI
 {% endcode-tabs-item %}
 {% endcode-tabs %}
 
-> The prefix `app` will be added to the component selector of all the components you will generate. This is to avoid name conflicts with other components and HTML elements. For instance, if you create a component named input it will not conflict with HTML's `<input />` element, since its selector will be `app-input`.
->
-> `app` is the default prefix, which is good for your main application. However, if you're writing a library of components to be used in other projects, you should choose a different prefix. For example, the [Angular Material](https://material.angular.io/) library uses the prefix `mat`. You can create a project stating the prefix of your choice using the flag `--prefix`, or change it afterwards in the file `.angular-cli.json`.
+> Префикс `app` будет добавлен ко всем компонентам, которые вы сгенерируете. Это сделано для того, чтобы избежать коллизий с другими HTML элементами. Например, если вы создадите компонент `input`, то коллизии не произойдет со стандартным элементом `input`, так как селектором созданного компонента будет `app-input`.
+
+> `app` - это стандартный префикс для главного приложения. Однако, если вы пишите библиотеку компонентов, которая будет использоваться в других проектах, нужно будет выбрать другой префикс. Например, библиотека компонентов [Angular Material](https://material.angular.io/) использует префикс `mat`. Вы можете создать проект с другим префиксом, используя флаг `—prefix` или изменить префикс после создания проекта в файле `angular.json`.
 
-We can use this component as-is and see the result!
+Давайте используем созданный компонент, чтобы увидеть результат!
 
-Open the root component file, `app.component.ts` and add the app-input-button-unit tag inside the template \(remember we refactored the root component to have an inline template\):
+Откройте `app.component.ts` файл и добавьте `app-input-button-unit` тэг в его шаблон:
 
 {% code-tabs %}
 {% code-tabs-item title="src/app/app.component.ts" %}
@@ -67,9 +66,9 @@ template: `
 {% endcode-tabs-item %}
 {% endcode-tabs %}
 
-Check what's new in the browser!
+Откройте браузер и посмотрите, что изменилось!
 
-Let's add some content in our new component. First, add a `title` member which we will use as the todo item title:
+Теперь, давайте добавим контент в новый компонент. Сначала, давайте создадим свойство `title` в классе компонента, которое мы будем использовать как название задачи:
 
 {% code-tabs %}
 {% code-tabs-item title="src/app/input-button-unit/input-button-unit.component.ts" %}
@@ -80,9 +79,9 @@ export class InputButtonUnitComponent implements OnInit {
 {% endcode-tabs-item %}
 {% endcode-tabs %}
 
-It will not interfere with the `app-root` component's `title`, since each component's content is encapsulated within it.
+Свойство `title` в `input-button-unit` компоненте, не будет пересекаться со свойством `title` в `app-root` компоненте, так как каждый компонент имеет свой контекст и все его свойства изолированы внутри.
 
-Next, add an interpolation of the title member in the template:
+Далее, добавьте вывод `title` свойства в шаблон компонента:
 
 {% code-tabs %}
 {% code-tabs-item title="src/app/input-button-unit/input-button-unit.component.ts" %}
@@ -97,7 +96,6 @@ template: `
 {% endcode-tabs-item %}
 {% endcode-tabs %}
 
-Check out the result!
-
-This component doesn't do much at this point. In the following chapters, we will learn about the component class, and then implement the component's logic.
+Посмотрите на результат!
 
+Получившийся компонент делает не очень много сейчас. Однако, в следующих частях мы добавим логику для этого компонента.