Bird
0
0

You want to create a reusable button component with the selector app-button that uses an external HTML template and multiple CSS files. Which is the correct component decorator configuration?

hard📝 Application Q15 of 15
Angular - Components
You want to create a reusable button component with the selector app-button that uses an external HTML template and multiple CSS files. Which is the correct component decorator configuration?
A@Component({ selector: 'app-button', templateUrl: './button.html', styleUrls: ['./btn.css', './colors.css'] })
B@Component({ selector: 'app-button', template: '<button>Click</button>', styles: ['./btn.css', './colors.css'] })
C@Component({ selector: 'app-button', templateUrl: './button.html', styles: ['./btn.css', './colors.css'] })
D@Component({ selector: 'app-button', template: './button.html', styleUrls: ['./btn.css', './colors.css'] })
Step-by-Step Solution
Solution:
  1. Step 1: Identify how to specify external HTML template

    Use templateUrl with the path to the HTML file.
  2. Step 2: Identify how to specify multiple external CSS files

    Use styleUrls with an array of CSS file paths.
  3. Step 3: Check each option for correct usage

    The configuration using templateUrl: './button.html' and styleUrls: ['./btn.css', './colors.css'] is correct. Others incorrectly use template for a file path or styles for external CSS files.
  4. Final Answer:

    @Component({ selector: 'app-button', templateUrl: './button.html', styleUrls: ['./btn.css', './colors.css'] }) -> Option A
  5. Quick Check:

    External HTML + multiple CSS files = templateUrl + styleUrls = B [OK]
Quick Trick: External HTML needs templateUrl; multiple CSS files need styleUrls [OK]
Common Mistakes:
  • Using styles for external CSS files
  • Using template instead of templateUrl for files
  • Mixing inline and external template properties

Want More Practice?

15+ quiz questions · All difficulty levels · Free

Free Signup - Practice All Questions
More Angular Quizzes