Solution 1 :

I followed the instructions on this page:
The problem was that I couldn’t read the attributes with the @Input property. Instead I used the elementRef to read the inputs:

import {Component, ElementRef, Input, OnInit} from '@angular/core';

  selector: 'test',
  templateUrl: './test.component.html',
export class TestComponent implements OnInit {
  constructor( private elementRef: ElementRef) {
    let el: HTMLElement = this.elementRef.nativeElement;
    this.question = el.getAttribute("question");
    this.answer = el.getAttribute("answer");

  @Input() question;
  @Input() answer;
  isHidden = false;

  ngOnInit() {

I still don’t know how could we use content projection.

Problem :

I would like to write a blog system where the writers can insert some custom angular components into their posts like this:

<p><b>Please solve this task!</b></p>
<task question="How much is 2+4?" answer="6"></task>

So the task component would display the question, and an input tag to check the user’s answer.

I found a blog post about this but it didn’t seem to support input bindings:

It would be ok for me to have just static attributes but I have to find a way to pass data to the embedded component.

There was also a good solution for this called ng-dynamic but it is no longer maintained and I can’t get it working: