How to learn Angular 2 4

Angular Tutorial German - Learn Angular for Beginners [2021]

src> app> app.comonent.html

This file is the Basic structure the app.

The HTML components give the content like Texts, pictures and videos and its structure and arrangement. The box structure is indented with tabs.

A special feature of Angular are the double curly braces . These mark an Angular variable that you can use as ...

  • Strings (texts)
  • number
  • Arithmetic operations
  • Formatted data
  • Function calls

... can use.

Another essential feature of Angular are its own directives. Directives describe the behavior and appearance of a tag in more detail, e.g..

These "Adjectives“Describe an HTML tag in more detail.

belongs to the structuring Directives. Angular used as a control structure. Like a for loop, e.g. B. a DIV box several times. This is comparable to a for loop as in any other programming language.

iterates (repeatedly) over the array.

  • is an object from the array
  • accesses a string within a JSON

Angular can reach the components of a JSON within the double curly braces.

src> app> app.component.scss

As already explained in my SCSS guide, three SCSS variables are defined in this file.


    A Sass compiler converts the SCSS code into normal CSS code. Using variables and other functions of SCSS can save you a lot of time.

    The star selection in CSS refers to all HTML components that are defined on this website.

    In the CSS classes we use the previously defined CSS variables for the colors and spacing:

    src> app> app.component.ts


    The code is divided into three blocks:

    • importStatements
      • All the dependencies / JavaScript library import these lines of code.
      • I imported a locally hosted JSON file with the contents of the cards.
    • Components
      • "Bracket": This is where all the parts that make up a module in Angular come together. B. the HTML, CSS and JavaScript.
    • Export-Class contains the functions of the app logic.
      • First you define the variable and (2D array)
      • The constructor loads the contents into the variable.
      • The function :
        • Lines 21 and 22 are supposed to overwrite one of the JavaScript arrays with a new RGB code.
        • When executed, the function generates a number between 1 and 0 with many decimal places.
        • The standard RGB color palette provides you with a spectrum of red tones combined with green and blue tones.
        • Function converts the decimal number into a hexadecimal, as is usual for RGB code.
        • removes all numbers after the decimal point. An RGB code is usually a 6-digit hexadecimal code (with a transparency level of 8 digits).

    src> app> cardsContent.json


    I saved the strings for the cards in the JSON memory structure.

    Later we can move the JSONs to a NoSQL such as MongoDB or CouchDB, which simplifies data management.

    The cards contain one Title, text content and its Starting color.